1.css基础信息
2.css行内样式写在style中 智能控制当前样式
<h1 style="color: red;font-size:60px;">欢迎来学习</h1>
书写繁琐 不能复用 要是下面的要求效果一样就得一直复制 不能体现出结构和样式分离的效果
3.内部样式
style标签可以写到head也可以写在body里面 一般在head里面 但没有实现结构与样式完全分离
<style>
h1{
color: red;
font-size:60px;
}
</style>
4.外部样式
写在单独的.css文件中 把所有css样式代码写在这里
link尽量写在head里面 href引入的文档来自于哪里 rel引入文档与当前文档的关系
引入 <link rel="stylesheet" href="./position3.css">
优势 可以复用结构清晰 实现了结构与样式的完全分离 可以触发浏览器缓存机制
5.样式的优先级
行内样式>内部样式=外部样式
内部样式和外部样式 和编写顺序有关 后来者居上 以 后编写的为主 后面的覆盖前面相同元素的 不相同则不会覆盖
同一个里面写 相同的属性元素也是以后面为主
6.语法规范
7.代码风格
8.通配选择器
可以选中所有html元素 格式如下
<style>
* {
color:darkred;
font-size: 40px;
}
</style>
9.元素选择器
为某种元素统一设置样式
h1{
color: chartreuse;
}
h2{
color: blue;
}
10.类选择器
根据标签class的值进行分类选中
一个标签p不能有多个class属性 一个class可以有多个值 要用空格隔开
11.id选择器
精准选中某个元素
写作格式：
#me {
color: brown;
}
<h1 id="me">我说：</h1>
12复合选择器
交集选择器
不可以用两个元素选择器进行选择 因为标签名不可能既是span又是p标签 标签加类名 类名加类名都可以
/* 选中类名包含me和wenhao的元素 两个元素选择器 */
.me.wenhao
{
color: blueviolet;
}
<h2 class="me wenhao">为啥不回消息！</h2>
/* 选中类名为you的p元素 */
p.you {
color: aqua;
}
<p class="you">速回消息！</p>
写法
选择器1选择器2选择器3选择器4选择器5{} 无空隙间隔
并集选择器 you或者why或者angry都选择
选择器，选择器，选择器{} 任何形式都可以写
注意最后一个选择器不写逗号
.you,.why,.angry{
font-size: 40px;
width: 200px;
background-color: chartreuse;
}
13html元素之间的关系
父元素 直接报过某个元素的元素
子元素 被父元素直接包含的元素
祖先元素 父亲的父亲一直往外找 都是祖先元素 父元素算是祖先元素的一种
后代元素 儿子的儿子 一直往里找 都是后代元素 子元素算是后代元素的一种
兄弟元素 具有相同父元素的元素互为兄弟元素
14后代选择器
可以用各种选择器嵌套
15子代选择器
用>连接 儿子 不是后代
/* div的儿子a */
div>a {
color: red;
}
16兄弟选择器
两种都是向下找 第一个可能就覆盖不到
/* 相邻兄弟选择器 */
/* 选中div后紧紧相邻的兄弟p元素
后面的 紧紧相连 才可使用 */
/* div+p{
color: rgb(81, 255, 0);
} */
/* 通用兄弟选择器 */
/* 选中div后所有的兄弟p元素 */
div~p{
color: red;
}
17属性选择器
写法
<style>
/* 第一种写法 选中具有title属性的元素
[title] {
color: brown;
} */
/* 第二种写法 选中具有title属性 且属性值为xxx的元素
[title="astudy01"]{
color: cornflowerblue;
} */
/* 第三种写法 选中具有title属性 且属性以字母X开头
[title^="c"]{
color: aquamarine;
}*/
/* 第四种写法 选中具有title属性 且属性以字母X结尾*/
/* [title$="y"]{
color: aquamarine;
} */
/* 第五种写法 选中具有title属性 且属性含有字母X */
[title*="y"]{
color: aquamarine;
}
</style>
18伪类选择器
概念 很像类 但不是类 是元素特殊状态的一种描述
写法
/* 选中的是没有访问过的a元素 */
a:link{
color: rgb(0, 139, 32);
}
/* 选中的是访问过的a元素 */
a:visited{
color: rgb(139, 32, 0);
}
19
