一、行内样式
1、直接在标签中添加style属性来达到添加的目的，但如果是大批量添加修改标签添加style属性，操作量大，耦合度高。
<!-- 行内样式 -->
<!--
所有元素都有style属性，在html中可以给标签中添加style=""来直接给标签添加样式
例： <div style="color:red;" > hello</div>
这种添加方式被称为行内样式、
-->二、内部样式
1、写在html内部，在标签中定义标签，然后对要操作的元素添加样式，适合批量修改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
color:red;
background:blue;
}
</style>
</head>
<body>
<div> hello</div>
<div> hello</div>
<div> hello</div>
</body>
</html>三、外部样式
当同时对多个页面修改样式时，可以构建.css文件，来达到对多个页面添加同一样式的操作。
（1）构建.css文件，在文件中添加需修改元素的样式
/*文件名：css选择器.css 该.css文件在css文件夹中*/
div{
color:red;
background:blue;
}（2）页面如果想调用.css文件，需要在head标签中添加link标签
具体格式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 该.css文件在css文件夹中 -->
<link rel="stylesheet" herf="css/css选择器.css">
</head>
<body>
<div> hello</div>
<div> hello</div>
<div> hello</div>
</body>
</html>四、三种样式优先级
行内样式>内部样式=外部样式，外部样式与内部样式谁先执行，看谁后执行
例：下述代码先执行行内样式，然后执行内部样式，最后才是外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 该.css文件在css文件夹中 -->
<link rel="stylesheet" herf="css/css选择器.css">
<style>
div{
color:red;
background:yellow;
}
</style>
</head>
<body>
<div style="color:red;background:green" > hello</div>
<div> hello</div>
<div> hello</div>
<div> hello</div>
</body>
</html>五、css文件语法规则
1、选择器（selector）:为了准确的找到需要添加样式的元素
格式：
选择器{
属性1:值1;
属性2:值2;
}
div{
color:red;
background:yellow;
}2、选择器的分类
（1）基本选择器
①元素选择器：用元素名称直接做选择
div{
color:red;
background:yellow;
}特例：选择所有元素 *
*{
color:red;
background:yellow;
}②属性选择器：根据元素属性进行选择
例1：div[id]{ } 给在div标签中有id属性的添加样式
拓展：div[id=xx]{ } 有id属性且id为xx的div元素
div[id*=xx]{ } 有id属性且id包涵xx的div元素
div[id^=xx]{ } 有id属性且id属性值以xx为开头的div元素
div[id$=xx]{ } 有id属性且id属性值以xx为结尾的div元素
div[id]{
color:red;
background:yellow;
}③id选择器：
格式 : #id值{
属性:属性值;
}
#xx{
color:red;
background:yellow;
}④class选择器
格式: .class值{
属性:属性值;
}
.xx{
color:red;
background:yellow;
}特例：结合选择器
p.xx{} p标签下class值为xx的元素
p#xx{} p标签下id值为xx的元素
⑤包含选择器 selector1 selector2 （注意：两个selector之间有空格）
例1：给div下的p标签加样式
div p{
color:red;
background:yellow;
}⑥子选择器 ：selector1>selector2 强调父子关系
例1：
div>p{
color:red;
background:yellow;
}⑦兄弟选择器（只找弟弟）：selector1~selector2 强调兄弟关系以ul li标签为例
<ul>
<li>hello01</li>
<li>hello02</li>
<li class="cc">hello03</li>
<li>hello04</li>
<li>hello05</li>
</ul>例1：只显示.cc的弟弟，即04与05
.cc~li{
color:red;
background:yellow;
}例2：.cc~* { }找所有的弟弟
⑧选择器组合(可以理解为数学中的或)：selector1,selector2,selector3,selector4
例：给下列标签加样式
<p>demo</p>
<p>demo</p>
<p>demo</p>
<div>hello</div>
<div>hello</div>
<div>hello</div>例1：只显示.cc的弟弟，即04与05
.cc~li{
color:red;
background:yellow;
}例2：.cc~* { }找所有的弟弟
⑧选择器组合(可以理解为数学中的或)：selector1,selector2,selector3,selector4
例：给下列标签加样式
<p>demo</p>
<p>demo</p>
<p>demo</p>
<div>hello</div>
<div>hello</div>
<div>hello</div>p,div{
color:red;
background:yellow;
}（2）伪元素选择器
①首字母： ::first-letter
<div>hello</div>通常给首字符设置样式可以添加span标签对首字母添加样式，虽然在网页上显示时看不出来，但他不再是一个整体。
<div><span>h</span>ello</div>如果需要对一个整体的首字母添加样式需要使用 ::first-letter 但该语句只能用到块级元素上（如果不知道什么是块级元素，可以理解为只能竖着布局的元素。）
div::first-letter{
color:red;
font-size:30px
background:yellow;
}②首行： ::first-line 但该语句只能用到块级元素上（如果不知道什么是块级元素，可以理解为只能竖着布局的元素。）
<div>略略略略略略（一堆略,在页面上设置很多行）</div>div::first-line{
color:red;
font-size:30px
background:yellow;
}特例：当div内容为英文时，在页面上会出现横向滚动条不会换行）
原因：中文每个汉字自成体系，英文是每个单词自成体系而字母不是。单词和单词之间要有空格。
解决办法：添加连字符： lll-lll
添加空格 ： lll lll
自己设置： word-break 取值如下：
break-all 单词裂开让每个字母自成体系
keep-all 保持
div{
word-break:break-all;
}
<div>lllllll（一堆l,在页面上会出现横向滚动条不会换行）</div>
③在前边插入一些东西 ::before
div::before{
content:"aaa";
}④在后边插入一些东西 ::after
div::after{
content:"aaa";
}3）伪类选择器
①结构性伪类选择器
.①
:nth-child(n) 正着数数
括号里边可以是数字n，n从1开始
括号里也可以是英文单词 odd奇数
even偶数
括号里也可以使表达式 2n+1 n从1开始计数
延申：
找第一个 nth-child(1)=first-child
nth-last-child(n) 倒着数数
找最后一个：last-child=nth-last-child(1)
注意：:nth-child（n）只认数字如果前边的类型刚好符合，则可选中否则选不到
例：ul li:nth-child(1) 这种情况下就找不到
<ul>
<div> hello</div>
<li>hello01</li>
<li>hello02</li>
<li>hello03</li>
<li>hello04</li>
<li>hello05</li>
</ul>.②
:nth-of-type(n)
括号里边可以是数字n，n从1开始
括号里也可以是英文单词 odd奇数
even偶数
括号里也可以使表达式 2n+1 n从1开始计数
延申：
找第一个 nth-of-type(1)=first-of-type
nth-last-of-type(n) 倒着数数
找最后一个：last-of-type=nth-last-of-type(1)
注意：
nth-of-type(n)即认数字也认类型，找同类型的的第n个元素
ul li:nth-child(even){
color:purple;
}②ui状态伪类选择器
/*
:hover鼠标悬停状态
:focus焦点状态
:checked选中状态
*/.①:hover鼠标悬停状态（鼠标悬停在该标签在页面上所显示的内容上时，才添加样式）
ul li:hover{
color:purple;
background:green;
}.②:focus焦点状态 一般用输入框（鼠标点击在该标签在页面上所显示的内容上时，才添加样式)
input:focus{
color:purple;
background:green;
}.③:checked选中状态 一般用在单选框或复选框上（鼠标选中该标签在页面上所显示的内容上时，才添加样式）
box-shadow加阴影
ul li:checked{
box-shadow:3px 3px 3px red;
}③其他伪类选择器
/* not() 过滤某些元素，给除括号内的其他元素添加样式*/
ul li:not(.xx){
box-shadow:3px 3px 3px red;
}六：选择器的优先规则
/*
选择器优先规则
1、选择器写的越长(或者叫越准确)优先级越高
2、优先级高低 id选择器>class选择器>元素选择器
3、同级别长度下,css代码按照顺序执行,后边的效果会把前边的效果覆盖掉
4、终极规则：以上规则适用于大部分场景，特殊场景不适用自行测试
*/
扫一扫
1431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
