CSS概述
- 1.CSS，全称“Cascading Style Sheets”，用于设置HTML标签的样式，它的基本结构如下：
基本结构
div{width: 480px; height: 320px; }
包含：选择符div;样式属性：width和height;样式属性值
- 2.Css使用方式
样式表主要有4种方式，即，
- “内嵌样式”：写在style标签对里面。
举例
<style>
div{
color: red;
}
</style>
- “行内样式”：直接写在标签行上面。
举例
<div style="color: red;">hello</div>
- “外链样式”：单独写一个css文件，通过link标签引入。
举例
举例
<style>
@import url("./index.css");
</style>
导入式可以同时导入多个样式,但导入每个文件时要如同写内嵌样式时，在每个属性值的末尾加上一个分号结尾。
四种方式的选择：
1.在开发中关于css样式一般或多或少都会使用一些行内样式与内嵌样式，但是主体还是通过引入单独的css文件进行使用的。
2.Link与@import两种方式都可以引入单独的css文件,我们一般选择link标签，即外链式。
3.Link与@import一些区别
（1）<link>除了加载CSS文件以外，它还能加载其它类型文件，如“icon”，而“@import”只能加载CSS文件
给网页加上图标：<link rel="shortcut icon" href="oa.jpg">
（2）<link>在现代的浏览器中是多线程加载的，也就是说在通过该标签加载一个文件的时候<body>标签内的DOM也在执行同步的加载。加载效率高于@import
（3）<link>作为一个标签，也就是一个DOM元素，是可以通过JavaScript进行操作的（如增加、删除<link>标签，修改<link>的属性值等）。而“@import”写在<style>标签内部或CSS文件内（写在<style>标签内和CSS文件内的写法一致），是无法通过JavaScript进行操作的。
- CSS的基础选择器主要有三个：“标签选择器”、“类选择器”和“ID选择器”。
标签选择器
<style>
div {
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
</style>
类选择器
.sle{
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
</style>
<style>
#sle {
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
</style>
- 一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。
- 后代选择器
后代选择器是对某元素所嵌套的指定元素进行选择，每个选择符之间用空格进行分割，多个嵌套层次应该以多个空格进行分割
后代选择器
<style>
div p {
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
div .son{
color: blue;
}
</style>
- 子选择器
子选择器区别与后代选择器的地方就是，后代选择器可以选择嵌套在标签内部任意层级的标签元素，而自选择器只能选择当前标签往内一层的元素。每个选择符之间用“>”进行分割。
<style>
div>p {
font-size: 32px;
color: brown;
width: 300px;
height: 100px;
background-color: antiquewhite;
border: 1px solid red;
text-align: center;
line-height: 100px;
}
div>span {
display: inline-block;
width: 400px;
height: 100px;
border: 1px solid red;
border-radius: 10px;
text-align: center;
line-height: 100px;
}
</style>
- 伪类选择器
伪类选择器和其它选择器有所不同，它是通过触发一定的“事件”来实现效果，也就是说如果不进行任何操作是看不到该选择器的CSS样式设置的。
通用伪类选择器如下（如果要同时生效，顺序不能变）:
作用于a标签上的伪类选择器如下：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
- 群组选择器
群组选择器的使用范畴是，多个选择器使用同一个样式或者同一组样式。这在做CSS样式初始化，CSS框架设计以及后期CSS代码优化时会经常使用。
群组选择器
p,div,h1,.mydiv,#par{
color:red;
}
作用于“，”分隔的所有标签,类选择器，ID选择器。
- 同级元素选择器
选定当前标签同级的其它指定标签。
同级元素有两种，即“+”和“~”，
“+”只能选择该标签相邻的下一个标签
“~”能选择该标签后的所有同级标签。
p ~ div{
color: brown;
}
<body>
<a href="https://www.baidu.com/">点击一下</a>
<div>hello style!</div>
<p>hello</p>
<div>hello stye!</div>
<h1>hello hello</h1>
<h1>hello hello</h1>
<div>hello</div>
</body>
-
属性选择器
1. [属性名]{...样式设置内容...} 举例：[title]{ color;red; } 2.[属性名="属性值"]{...样式设置内容...} 3.[type^="datetime"]{...样式设置内容...} 举例：[title^="iam"]{ color;red; } 4.[title$="picture"]{...样式设置内容...} 举例：[title$="h1"]{ color;red; } 5.[title*="is"]{...样式设置内容...} 将标签中的一个属性名名为“title”，属性值含有“is”的属性名值对作为一个选择器 举例：[title*="h1"]{ color;red; } 6.[title~="a"]{...样式设置内容...} 将标签中的一个属性名名为“title”，属性值含有空格分隔的词为“a”的属性名值对作为一个选择器 这个规则会选择 title 文本包含 "a" 的所有图像 举例：[title~="a"]{ color;red; } 7.[title|="this"]{...样式设置内容...} 将标签中的一个属性名名为“title”，属性值等于“this”或以“this”开头的属性名值对作为一个选择器。以连字符(-)连接的如lang ="this-us"，也算以this开头 上面这个规则会选择 title 属性等于 this 或以 this- 开头的所有元素 举例：[title|="this"]{ color;red; } -
4.权重
当样式冲突时，将根据【权重+就近原则】来判断以谁的样式为准。
- 基本类型选择器权重
行列样式：1000
Id选择器： 100
Class选择器：10【属性选择器】
标签选择器：1
*任意符选择器：0 （大于默认样式与继承验样式）
- 组合选择器权重
群组选择器： 单独计算
后代，子代，兄弟等选择器：权重相加
- 就近原则
当权重值相同时，谁和要设置的html标签隔得近，谁的权重就高。
- 先比较权重，权重相同依据就近原则
- 继承比默认的大，但是比赋予的权重小；
- 后代，子代，兄弟等选择器，权重相加(.name>p,权重为10+1=11)
- 群组选择器： 单独计算(div,p,h1,.name ，#pra 权重分别为：1，1，1，10,100)