社区
掘金
学习内容
- 什么是 CSS
- CSS 的三种引入方式
- 书写规范
- CSS 基础选择器
- CSS 复合选择器
- 字体样式
- 颜色表示
- 首行缩进
- 文字对齐方式
- 文字的线的样式
1、什么是 CSS
CSS（Cascading Style Sheets）CSS 通常称为 CSS样式表或层叠样式表（级联样式表），主要用于设置 HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS 以 HTML 为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
2、CSS 的三种引入方式
① 行内式引入
CSS 的行内式引入就是在 HTML 标签元素的属性中设置 Style，其基本格式语法如下：
<标签名 style="属性1:属性值1;属性2:属性值2;属性3:属性值3;">内容</标签名
一个小案例代码及效果如下：
<p style="color:red;font-size:24px;">青春有限，抓紧赚钱！</p>
青春有限，抓紧赚钱！
② 内部样式表（内嵌样式表）
内嵌式大多是指在 HTML 文件里的 标签内写入 样式
基本语法如下：
<head>
<style type="text/css">
选择器 {
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
}
</style>
</head>
③ 外链式
css 第三种引入方式是通过 html以外的文件进行链接建立关系来引入的，基本格式如下：
<head>
<link rel="stylesheet" href="CSS文件的路径" />
</head>
- href：定义所链接外部样式表的URL，可以使相对路径，也可以是绝对路径。
- type：定义所连接文档的类型，在这里需要指定为"text/css"，表示链接的外部文件为CSS 样式表。可以省略。
- rel：定义当前文档与被连接文档之间的关系，在这里需要指定为"stylesheet"，表示被连接的文档是一个样式表文件。
总结：
| 样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
|---|---|---|---|---|
| 行内样式表 | 书写方便，权重高 | 没有实现样式和结构的分离 | 较少 | 控制一个标签（少） |
| 内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面（中） |
| 外部样式表 | 完全实现结构和样式相分离 | 需要引入 | 最多，强烈推荐 | 控制整个站点（多） |
3、书写规范
① 命名规范
在使用类选择器时，需要给标签进行设置class属性，其中属性的名称不能以纯数字或者数字开头，也不允许特殊符号（除_-）进行命名。
② 尽量使用英文。
③ 书写格式尽量参照如下：
选择器 {
属性: 属性值1;
}
4、CSS 基础选择器
① 标签选择器
标签选择器则是以 HTML 的标签直接进行选择，为页面某一标签指定统一的 CSS 样式。
语法：
标签名{属性1:属性值1;属性2:属性值2;}作者
元素名{属性1:属性值1;属性2:属性值2;}
② 类选择器
主要用于可以选择一个或多个标签
用法：样式声明点->结构调用class
语法：
<style>
.类名 {
属性1:属性值1;
}
</style>
<body>
<p class="类名">今天天气好</p>
</body>
③ 多类名选择器
可以给标签指定多个类名，从而达到更多的选择目的。
实例结构如下：
<style>
.one {
font-size:14px;
}
.two {
font-weight:700;
}
.three {
color: red;
}
</style>
<body>
<p class="one two">one</p>
<p class="two three">two</p>
<p class="one two trhee">three</p>
</body>
/*
p-one 可以被 .one 和 .two 修饰
p-two 可以被 .two 和 .three 修饰
p-three 可以被 .one,.two 和 .three修饰
*/
④ id 选择器
id 选择器用于选择已设置 id 属性的 HTML 标签，设置样式是用#id 进行选择，其基本语法如下,：
#id名 {属性1:属性值1;}
PS:id选择与类选择器的区别主要是 id 只能设置1个，而 class类可以设置多个。
⑤ 通配符选择器
通配符选择器用"*"表示，*就是所有的，它匹配页面中的所有元素，效率也是最慢的，其基本格式如下：
* {属性1:属性值1;}
/* 如下代码就是清除 HTML 页面所有标记的默认边距 */
* {
margin: 0;
padding: 0;
}
总结：
| 选择器 | 作用 | 缺点 | 使用情况 | 用法 |
|---|---|---|---|---|
| 标签选择器 | 可以选出所有相同的标签，比如 div | 不能差异化选择 | 较多 | div {color: red; |
| 类选择器 | 可以选择出 1个或者多个标签 | 可以根据需求选择 | 非常多 | .nav{color:red;} |
| id选择器 | 一次只能选择1个标签 | 只能使用一次 | 不推荐使用 | #nav {color:red;} |
| 通配符选择器 | 选择所有的标签 | 选择的太多，有部分不需要 | 不推荐使用 | * {color: red;} |
5、复合选择器
① 后代选择器
顾名思义，后代选择器就是可以选择一个祖宗的所有后代，也就是可以选择包含标签，用来选择元素或元素组的后代，其写法就是把外层标签写前面，内层标签写后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
示例如下:
<style>
div span p {
属性1:属性值1;
}
</style>
<body>
<div>
<span>
<p></p>
</span>
</div>
<span>
<p></p>
<span>
</body>
/* 最终会对 div 里面的 标签p 进行css样式设置 */
② 子元素选择器
子元素选择器又称为父子选择器，其意义只能选择作为某元素子元素的元素。其写法就是吧父级标签写在前面，子集标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。
示例代码如下：
<style>
div > p {
font-size: 40px;
}
</style>
<body>
<div>
<p>one</p>
<p>two</p>
<span>
<p>
test
</p>
</span>
<p>three</p>
</div>
</body>
/* 其效果就是one,two,three被选择进行css修饰了 */
③ 交集选择器
交集选择器由两个选择器构成，找到的标签必须满足：既有标签一的特点，也有标签二的特点。其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。
可以理解交集选择器是并且的意思，即。。又。。
如：
p.one 选择的是: 类名为 .one 的段落标签
④ 并集选择器
并集选择器是可以一次进行多个选择的，中间用逗号隔开，任何形式的选择器都可以作为并集选择器的一部分，如果某些选择器定义的样式相同，那么就可以用并集选择器进行定义相同的 CSS 的样式
用法：
<style>
p,div,.one {
属性: 属性值;
}
</style>
<body>
<p></p>
<div></div>
<p class="one"></p>
</body>
⑤ 相邻选择器
相邻选择器就是为了精确选择选择器1后面的选择器2，用法：选择器1 + 选择器2
div+p 是为了选择紧挨着 div 后边的 p 标签
示例如下:
<style type="text/css">
div + p {
color: red;
}
</style>
<body>
<div>
<p>one</p>
<p>two</p>
<span><p>three</p></span>
<p>four</p>
</div>
<p>five</p>
<p>six</p>
</body>
/* 结果只有 five 被修饰了红色 */
注意，相邻选择器对li来说有点特殊示例即效果如下：
<style type="text/css">
.test li+ li {
color: red;
}
</style>
<body>
<ul class="test">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</body>
- one
- two
- three
- four
因为对于 li 来说，里后面一定只剩下li，所以浏览器默认处理除第一个li后面的li都会被选上。
⑥ 伪类选择器
连接伪类选择器：
- :link 未访问连接
- :visited 已访问连接
- :hover 鼠标移动到连接上
- :active 选定的连接
- :focus 光标焦点的元素
写的时候要尽量按照 lvha 顺序。
因为是伪类选择器所以都是利用交集选择器 a:link a:hover 示例如下：
<div>
<style>
.test:link {
color: pink;
}
.test:visited {
color: red;
}
.test:hover {
color: yellow;
}
.test:active {
color:green;
}
input.test:focus {
background: #F00;
}
</style>
<a href="#" class="test">随便点我测试</a>
<input class="test" text="text"/>
<div>
a:hover span {}
上述伪类选择器也可以用于其他的标签例如div，代码如下
<style>
.div:hover {
background-color: green;
}
.div:active {
background-color: blue;
}
</style>
<div class="div" style="width: 50px; height: 50px; background-color: red;"></div>
总结：
| 选择器 | 作用 | 特征 | 使用情况 | 用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素或元素组的后代 | 是选择所有的子孙后代 | 较多 | div p {color: red;} |
| 子代选择器 | 选择作为某元素子元素的元素 | 只选择亲儿子 | 较少 | .nav > p {color: red;} |
| 交集选择器 | 选择两个标签交集的部分 | 较少 | a:link {color: red;} | |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | .nav .header {color: red;} |
6、字体样式
常用的字体样式如下：
- font-size
- font-familty
- font-weight
- font-style
- word-spaceing
- line-height
① font-size 文字大小，常用单位 px像素（推荐使用），em 相对于当前对象内文本的字体尺寸
效果如下：
<p style="font-size: 24px;">我变大了</p>
我变大了
② font-family 用于设置字体。网页常用的字体有宋体、微软雅黑、黑体，效果如下：<p style="font-family: "微软雅黑";>我是微软雅黑</p>
我是微软雅黑
可以同时指定多个字体，中间以英文逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，知道找到合适的字体。
如下：font-family: arial,'\5b8b\4f53';
后面的代码是 Unicode字体，为防止有时浏览器解析中文错误，就使用这个方法，这个代码的获取的方式也很简单，在 chrome等浏览器的开发者工具控制台输入 escape()可以来测试什么字体，如下图所示：
只需将 %u改成\就行
注意：
- 现在网页中普遍使用 14px+。
- 尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有 bug。
- 各种字体之间必须使用英文状态下的逗号隔开。
- 中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
- 如果字体名包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，比如 font-family: "Times New Roman";。
- 尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。
③ font-weight 字体的粗细，其可选的值为 100~900,需为100的倍数，也可直接设置样式：normal 默认值(400)，bold 加粗(700).
效果如下：
<p style="font-weight: normal">我是 normal</p>
<p style="font-weight: bold">我是 bold </p>
我是 normal
我是 bold
④ font-style 字体的风格，其可选值是 normal 默认值不倾斜，italic 斜体，oblique 斜体.效果如下： ```HTML我是 normal
我是 italic
我是 oblique
```我是 normal
我是 italic
我是 oblique
⑤ word-spacing 控制单词之间的距离，值越大，间距越大，可以为负值,对中文无效，letter-spacing 控制字符与字符之间的距离，值越大，间距越大，可以为负值,对中文有效。
效果下：
<p style="word-spacing: 20px;">I Love you</p>
<p style="letter-spacing: 20px;">你好呀</p>
I Love you
你好呀
⑥ line-height 行高，控制行与行之间的距离，normal 为默认值，效果如下：
<p style="line-height: 60px;">天不刮风，天不下雨天上有太阳，妹不开口妹不说话，妹心怎么想，走了太阳来了月亮又是晚上。北京天气很热，冬天很冷，天气无常。锄禾日当午，汗滴禾下土。吾不能变心之从俗兮，故将愁苦而终穷。</p>
天不刮风，天不下雨天上有太阳，妹不开口妹不说话，妹心怎么想，走了太阳来了月亮又是晚上。北京天气很热，冬天很冷，天气无常。锄禾日当午，汗滴禾下土。吾不能变心之从俗兮，故将愁苦而终穷。
⑦ 文字的综合设置：
基本语法：
选择器 {font:font-style font-weight font-size/line-height font-family;}按照顺序写，文字大小和字体必须写，其他的不写取默认值，示例如下：
<p style="font:20px/40px arial,'simsun'">今天天气炎热</p>
今天天气炎热
7、颜色表示
css 样式表中修饰颜色属性常带有 color属性，其属性值可以使用 #FFF #FFFFFF 16进制表示，也可以使用 rgb()实现，再选择颜色数值时可以配合一些工具进行获取颜色值，比如 photoshop 的吸管工具可以获取值，效果如下:
<span style="color: rgb(123,22,53);">五</span>
<span style="color: #BA8;">彩</span>
<span style="color: #AABCF1;">斑</span>
<span style="color: red;">斓</span>
<span>的世界</span>
五彩斑斓的世界
8、首行缩进
text-indent 用来表示首行缩进的程度，单位 em 1个em相当于1个汉字的大小，效果如下：
<p style="text-indent: 2em;">今夜天气多云转晴，阳光明媚</p>
今夜天气多云转晴，阳光明媚
9、文字对齐方式
text-align 用来设置盒子里边内容的水平对齐方式，不能控制盒子本身，属性值有 left（默认值，左对齐），center（水平居中），right（右对齐）
效果如下：
<p style="text-align: left;">孙行者</p>
<p style="text-align: cener;">者行孙</p>
<p style="text-align: center;">行者孙</p>
孙行者
者行孙
行者孙
10、文字线的样式
text-decoration 用来设置线的颜色，其属性值有 none 默认值没有线，underline 下划线，line-through 删除线，overline 上划线。
效果如下：
<p style="text-decoration: none;">我是 none</p>
<p style="text-decoration: underline;">我是 underline</p>
<p style="text-decoration: line-through;">我是 line-through</p>
<p style="text-decoration: overline ;">我是 overline </p>
我是 none
我是 underline
我是 line-through
我是 overline
另外改变这个线的颜色方式有很多，这里以下划线举例，单纯用 text-decoration 是不能改变颜色的，可以使用<ins>与文字配合改变颜色，也可以使用 样式的 border-bottom 属性进行设置下划线的设置，效果如下：
<p><ins style="color: red;">我是ins设置的</ins></p>
<p style="border-bottom: 1px solid #F00">我是 border-bottom 设置的</p>
我是ins设置的
我是 border-bottom 设置的