1. css概述
Cascading Style Sheets, 层叠样式表,又叫级联样式表,简称样式表。 给HTML标签添加样式, 美化网页
2. css 的三种引入方式
2.1 行内样式或内联样式
特点:在HTML标签上进行样式的声明
语法:
<Any style="样式声明;color:red;样式声明"></Any>
样式声明:属性名:属性值
缺点:结构(html)与样式(css,style)不分离,代码重复,不好维护
2.2 内部样式
在网页中一个独立的地方书写样式规则,在head标签中,写一对style标签,在style内书写样式规则
样式规则语法:
选择器 {
样式声明(属性名:属性值);
样式声明(属性名:属性值);
}
缺点:结构样式虽然有分离,但是分离不彻底,代码不能重用
2.3 外部样式,常用
在独立于网页的任意地方,新建一个样式表文件(.css为后缀),在此文件内书写样式规则,最后在html文件内,head标签内引入该css文件
<head>
<link rel="stylesheet" href="css文件的路径">
</head>
优点:结构清晰,结构与样式彻底分离,代码可以重用,好维护
优先级:行内样式 > 内部样式 > 外部样式
3. 选择器(重点)
- 通用选择器
- 特点: 可以匹配html的任意标签
- {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
只能写所有标签都应用的样式
}
注意:慎用
- 元素(标签,标记)选择器
以html的标签名作为选择器
语法:
<div>红色</div>
<div>绿色</div>
div {
color: red;
}
+ id 选择器
以html标签的id属性值作为选择器,选择器前需要加上#
<div id="app"></div>
#app {
color: red;
}
注意:id和class的值不能乱起,尽量语义化,不能以数字开头,不能掺杂特殊符号(@#$%^&*!),可以添加的-_,id的值是唯一的
```
<div id="a1"></div> 对
<div id="1a"></div> 错
<div id="a1"></div> 错
<div id="nav-tab"></div> 错
```
-
类选择器(class选择器)
以html标签的class属性值作为选择器,选择器前加上点(.)
.nav {
width: 200px;
height:200px;
}
-
群组选择器
将多个选择器放到一起进行样式的设置
语法:选择器1,选择器2,选择器3,… {}
<div class="div1">a</div>
<p class="p1">b</p>
<span id="span1">c</span>
.div1, .p1, #span1 {
color: red;
}
- 后代选择器
通过元素的后代关系作为选择器
<div>
<p>
<a class="a1">红色</a>
</p>
</div>
<div>
<a class="a1">不变色</a>
</div>
div .a1 {
//找的是页面上div里有class为a1的元素
}
-
子代选择器
通过元素的子代关系作为选择器
<div>
<h1>
<p>
<a class="a1">红色</a>
</p>
</h1>
</div>
<div>
<a class="a1">不变色</a>
</div>
div>h1>p>.a1 {
color: red
}
-
伪类选择器
匹配元素的行为效果,不同的状态
- :hover 当鼠标在此元素上时,所修改的样式
- :link 给超链接a标签使用,匹配尚未访问的样式
- :visited 给超链接使用,匹配访问过的样式
- :focus 匹配input输入框获取焦点的时候
- :active 匹配超链接,文本,输入框等被激活的时候
选择器的优先级
优先级:权值(权重的大小),权值越大优先级越高,反之越低
元素选择器 1
类选择器 10
伪类选择器 10
id选择器 100
行内样式 1000
4. 文本的样式
+ color: 设置文字的颜色,取值颜色单位
+ text-align: 设置水平对齐方式,left/center/right,给块级元素加
+ line-height: 设置文本的行高,一般都会用来设置垂直方向居中
+ 纯数字: 1, 2, 3,这个数值是基于自身文字大小来算的,值*自身文字大小
+ 数字+px, 100px
+ 百分比:这个数值是基于自身文字大小来算的
+ text-decoration: 设置文本的装饰效果
+ none:不装饰,普通文本
+ underline: 下划线
+ overline: 上划线
+ line-through: 中划线
+ text-indent:设置段落的首行缩进,取值10px , 1em,一般取值建议使用2em,如果用px,根据一个文字的大小去设置,百分比是基于父元素
+ text-shadow: 设置文本的阴影,每个值用空格分开
+ 必需的,水平偏移位置,取值为px,可以为负值,值为正向右偏移
+ 必须的,垂直偏移位置,取值为px,可以为负值,值为正向下偏移
+ 模糊大小,取值px,越大越模糊
+ 阴影颜色,颜色单位
5. 字体的样式
+ font-size: 设置字体大小,一般单位px,手机端常用rem
+ font-family: 设置文字的字体
p {
font-family: "微软雅黑","方正幼圆"
}
+ font-style: 设置文字的特殊样式
+ normal: 默认值,正常
+ italic: 斜体
+ font-weight: 设置字体粗细
+ normal: 正常
+ bold: 粗体
+ bolder: 更粗
+ lighter:更细
+ 100~900的数字,100,200,300...
+ 400 等同于 normal, 700等同于bold
+ font : 设置字体,是一个复合属性
顺序:"font-style font-weight font-size font-family"
注意:必须写font-size 和 font-family
6. css中常见的长度单位
+ px,像素单位
+ em, 如果em应用到了font-size身上,那么这个em就是根据自身的font-size来计算,如果用在其他属性身上,是根据父元素的font-size来计算
+ rem,相对单位,永远相对于根标签(html)的font-size来计算,默认1rem=16px
7. css中表示颜色的几种写法
+ 颜色英文单词
+ rgb(r,g,b), r、g、b取值均为0~
255 => 文艺程序员
+ rgba(r,g,b,alpha),alpha取值为0~1,代表透明度,值越小越透明
+ 16进制表示法,取值只能是0~9或a~f
#aabbcc
#ffffff => #fff
#ff0000 => #f00