Monodyee

这个屌丝很懒，什么也没留下！

热门标签

有关css基础的基础选择器、字体文本属性、Emmet语法及复合选择器

作者：Monodyee | 2024-05-06 10:40:10

踩

这里写目录标题

一级目录
- 二级目录
- - 三级目录
基础选择器、字体文本属性
Emmet语法及复合选择器

一级目录

二级目录

三级目录

基础选择器、字体文本属性

一、语法规范

1.

<head>
    <style>
        p<!--选择器-->{
            color属性: red值;
        }
    </style>
</head>
1
2
3
4
5
6
7

2.代码风格

每一行换行
属性用小写字母
选择器后一个空格，属性的冒号后一个空格

二、基础选择器

1.标签选择器

<head>
    <style>
        p {
            color: red;
        }
    </style>
</head>
1
2
3
4
5
6
7

2.类选择器：样式点.定义，结构类class调用

<head>
    <style>
        .red {
            color: red;
        }
        .box {
            width: 150px;
            height: 100px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="red box">冰雨</li>
    </ul>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.id选择器：样式#定义，结构id调用，只能调用一次

<head>
    <style>
        #pink {
            color: pink;
        }
    </style>
</head>
<body>
    <div id="pink">冰雨</div>
</body>
1
2
3
4
5
6
7
8
9
10

4.通配符选择器：把body内的全改

<head>
    <style>
        * {
            color: pink;
        }
    </style>
</head>
<body>
    <div>冰雨</div>
    <span>好的</span>
</body>
1
2
3
4
5
6
7
8
9
10
11

三、字体属性

1.字体系列

<head>
    <style>
        body {
            font-family: 'Microsoft YaHei',arial,tahoma,'Hiragino Sans GB';
        }
    </style>
</head>
1
2
3
4
5
6
7

2.字体大小

标题要另外重新设置

<head>
    <style>
        body {
            font-size: 16px;
        }
        h2 {
            font-size: 16px;
        }
    </style>
</head>
1
2
3
4
5
6
7
8
9
10

3.字体粗细

<head>
    <style>
        .bold {
            font-weight: bold;
            或者
            font-weight: 700;细变粗，更提倡
        }
        h4 {
            font-weight: 400;粗变细
            或者
            font-weight: normal;
        }
    </style>
</head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4.字体样式

<head>
    <style>
        p {
            font-style: normal;倾斜改为不倾斜
            font-style: italic;不倾斜改为倾斜
        }
    </style>
</head>
1
2
3
4
5
6
7
8

5.字体复合属性

<head>
    <style>
        div {
            font: font-style font-weight font-size font-family;
            font: italic 700 16px 'Microsoft yahei';<!--简略版-->不可以换顺序，前两个可以省略
        }
    </style>
</head>
1
2
3
4
5
6
7
8

四、文本属性

1.文本颜色

<head>
    <style>
        div {
            color: red;
            color: #e600ff;最常用
            color: rgb(0, 255, 242)
        }
    </style>
</head>
1
2
3
4
5
6
7
8
9

2.对齐文本

<head>
    <style>
        h2 {
            text-align: center;水平居中，还有left,right
        }
    </style>
</head>
1
2
3
4
5
6
7

3.装饰文本

<head>
    <style>
        div {
           text-decoration: none;取消下划线
           text-decoration: underline;下划线
        }
    </style>
</head>
1
2
3
4
5
6
7
8

4.文本首行缩进

<head>
    <style>
        p {
            text-indent: 2em;一个em是相对当前元素的一个文字大小
        }
    </style>
</head>
1
2
3
4
5
6
7

5.行间距

当让行间距等于盒子高度时，可以让文字垂直居中

<head>
    <style>
        p {
            line-height: 26px;文本高度不变+上行距+下行距
        }
    </style>
</head>
1
2
3
4
5
6
7

五、引入方式

1.内部样式表

上述

2.行内样式表

注意双引号，使用较少，只能改变一个标签

<p style="color: pink; font-size: 12px">青春</p>
1

3.外部样式表

新建一个css文件，注意后缀为css,将所有css代码都放入此文件,不需要写style,只写样式就可以，div{color: pink;}
在html页面使用link引入文件，link+tab

<head>  
    <link rel="styleshleet" href="css文件路径">
</head>
1
2
3

六、Chrome调试工具

1.打开方式

F12或右键空白处，检查，elements

2.使用

放大：ctrtl+滚轮
左侧html右侧css

Emmet语法及复合选择器

一、Emmet语法

1.快速生成html语法

标签+tab

div*10快速生成10个div
ul>li快速生成父子关系标签
+快速生成兄弟关系标签

默认div
.nav快速生成

#win快速生成

span.nav快速生成
span#win快速生成
.nav$*5快速生成排好序的nav
{}可以生成标签内内容，div{学习使我快乐}*5

2.快速生成css语法

tac:text-align: center;
ti:text-indent: 2em;
w700:width: 700px
lh26px:line-height: 26px;

二、复合选择器

1.后代选择器

后续元素必须是元素一的后代，逐层查找，中间必须有空格，改变最后的元素代表的多个标签

<style>
    元素一ul 元素二li {
        color: pink;
    }
    元素一ul 元素二li 元素三a{
        color: red;
    }
    .nav (li) a{
        color: yellow;
    }
</style>
<ul>
    <li>粉字</li>
    <li><a href="#">红色链接</a></li>
    <li><p><a href="#">也是红色链接</a></p></li>
</ul>
<ul class="nav">
    <li><a href="#">黄色链接</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2.子选择器

只会选择亲儿子

<style>
    .nav>a{
        color: red;
    }
</style>
<ul class="nav">
    <li><a href="#">红色链接</a></li>
    <li><p><a href="#">不变色</a></p></li>
</ul>
1
2
3
4
5
6
7
8
9

3.并集选择器

<style>
    div,p,.pig li{
        color: pink;
    }
</style>
<div></div>
<p></p>
<ul class="pig">
    <li></li>
</ul>
1
2
3
4
5
6
7
8
9
10

4.伪类选择器

按照LVHA的顺序书写

<style>
    a:link选择未被选择的链接{
        color: pink;
        text-decoration: none;
    }
    a:visited选择被选择的链接{
        color: black;
    }
    a:hover选择鼠标经过的链接{
        color: red;
    }
    a:active选择鼠标按下但未弹出的链接{
        color: green;
    }
</style>
<a href="#">小猪佩奇</a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

一般写法：

<style>
    a {
        color: pink;
        text-decoration: none;
    }
    a:hover选择鼠标经过的链接{
        color: red;
    }
</style>
<a href="#">小猪佩奇</a>
1
2
3
4
5
6
7
8
9
10

:focus伪类选择器：
用于选取获得焦点的表单元素，只改变取得焦点的临时状态

<style>
     input:focus {
        back-ground-color: pink;
        color: red;
     }
</style>
<input type="text">
<input type="text">
<input type="text">
1
2
3
4
5
6
7
8
9

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/543798