西安网站建设设计的好公司哪家好/windows优化软件哪个好
文章目录
- 1. 什么是css
- 2. css的引用方式
- 3. 常用元素选择器
- 4. 样式优先级
- 5. 命名规范
- 6. 选择器优先级
1. 什么是css
层叠样式表，是一种为HTML文档添加样式的计算机语言（网页的衣服）
2. css的引用方式
（1）内部样式：在head标签中间新建一个style标签，用来存放css代码
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style></style>
</head>
（2）外部样式：在head标签中间新建一个link标签，通过href属性设置外部css地址
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><link rel="stylesheet" href="">
</head>
（3）行内样式：在开始标签内部设置一个style属性，用来存放css代码
<div style="width: 200px; height: 200px; background-color: red;"></div>
3. 常用元素选择器
选择器作用：精确选中元素，越精确优先级越高
<body><div class='main'><ul><li>1</li><li>2</li><li>3</li></ul><p>123</p></div>
</body>
（1）后代元素选择器（最常用）
由外到内一层一层写，中间用空格隔开
.main li {color: red;}
（2）子元素选择器
选中的是儿子元素，选不到后面的元素，如下：只能选中第一个ul
.box > ul{}
<div class='box'><ul><li></li><li></li></ul><div><ul><li></li><li></li></ul></div></div>
（3）相邻元素选择器
只有C为红色（选择最接近该元素的元素）
<div class='box'><ul><li>A</li><li class='second'>B</li><li>C</li><li>D</li></ul></div>
.second+li {color: red;}
（4）兄弟元素选择器
CD均为红色（选择与该元素同级指定的所有元素）
.second~li {color: red;}
兄弟元素选择器和相邻元素选择器都只选择该元素下面的元素
相邻元素 +
兄弟元素 ~
（5）标签名选择器
div{color: red;
}
4. 样式优先级
行内样式 > 内部样式
行内样式 > 外部样式
外部样式 = 内部样式
行内样式优先级最高
浏览器从上往下解析代码（后面覆盖前面）
5. 命名规范
见名知义
规范：
1、不能是拼音
2、不能用单独某一个英文字母
3、不能用单独的数字
4、不能以数字开头，可以数字结尾
5、不能出现汉字
6、禁止广告类命名，包括英文单词广告
7、不能使用下划线，可以使用连字符-
6. 选择器优先级
ID > class > 标签名选择器
同类型选择器：个数越多优先级越高