css简介
css指的是层叠样式表(Cascading Style Sheet),样式就是定义如何显示html元素,设置他的背景、字体大小颜色、边框等等。通常把样式存储到样式表中,为了代码简洁便于维护,大多数放置在css文件中,引入外部css文件,css文件就是一个外部样式表。
css语法介绍
css语法规则集由选择器和声明块组成。选择器指的就是您要设置样式的html元素。如标签名(body ,h1,p,div...)就是一个选择器。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
font-size:40px
}
</style>
</head>
<body>
hello world
</body>
</html>
css的样式特性
1.继承性
文本样式和字体样式的继承
绝大多数文本字体样式,可以被继承
a标签不会继承字体颜色2.堆叠性
为一个标签定义多个样式规则
如果样式属性不冲突,都会作用到这个标签上3.优先级
默认优先级
高 内联样式
中 内部样式,外部样式-------就近原则
低 浏览器默认样式
f12关于优先级的显示
默认情况下,f12中样式是按照默认优先级顺序从上往下显示
三.基础选择器
(原文链接:)
选择器,规范了页面中哪些元素能够使用当前设置的样式
就是一个条件,符合这个条件的元素都可以使用这个样式
1.通用选择器
{样式声明} (匹配所有元素,但是的效率非常低,不建议使用)
例:*{margin:0;padding:0}
2.元素选择器
标签关键字{样式声明;}
div{} p{}
3.ID选择器
<元素 id=“id值”>
#id值{样式声明}
id在一个页面中不能重复,所有id选择器只被一个元素应用
4.类选择器
使用.定义样式,哪个元素想用,用class都能调用
<元素 class=“类名”>
.类名{样式声明}
类选择器的其它用法
①.多类选择器
<元素 class="类名1 类名2 类名3.......">
②.分类选择器
元素选择器.类选择器{样式声明}
.类选择器.类选择器{样式声明}
.tooltip.show{}
③.类名的定义规范
①必须有.
②不能以数字开头
③只能包含- 或者_
v④尽量见名知意
5.群组选择器
选择器1,选择器2,选择器3.....{样式声明} #d1,.c1,div,p.c2{color:red;background-color:yellow}
6.后代选择器
通过元素的后代关系,来匹配元素
后代关系:一层嵌套或者多于一层嵌套称为后代
选择器1 选择器2 选择器3{样式声明}
7.子代选择器
通过元素子代关系,来匹配元素
子代关系,一层嵌套为子代
选择器1>选择器2>选择器3{样式声明}
子代和后代选择器可以混合使用
#d1>p span{color:red;}
8.伪类选择器
匹配元素在某一个状态时的样式
只适用于a标签的伪类
①未被访问:link a:link{color:red}
②已被访问:visited a:visited{color:green}
所有元素都能用的伪类
:hover 鼠标悬停的状态
:active 激活状态
:focus 元素获取焦点时的状态(input button)
9. 选择器权值
选择器权值,代表选择器的重要程度
重要程度高,优先显示
!import >1000
内联样式 1000
id选择器 100
类选择器 10
伪类选择器 10
元素选择器 1
通用选择器 0
继承的样式 无
权值的特点
当一个选择器中含有多个选择器时,需要将所有的选择器权值进行相加值最大的显示
有多个选择器的权值一样大,按照就近原则
添加了!important当前css样式直接获取最高优先级
群组选择器,不相加,个算个的
选择器权值的计算,不会超过本选择器权值的最大数量级
css常用属性
1、color: red; 设置文字颜色
2、font-size: 50px; 设置文字大小
3、font-family: “黑体”; 设置字体(如果设置的是中文字体,要加双引号!)
4、width: 100px; 设置宽度
5、height: 100px; 设置高度
6、background: red; 设置背景色
7,内容水平对齐方式:text-align:left|center|right
8,首行缩进:text-indent