一、css导入方法，包含行内样式，内部样式，外部样式
行内样式，在html语句中使用
内部样式，在html头部使用
外部样式，在css文件中使用，通过link连接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css导入方法</title>
<!--第二种 内部样式表：将样式编写到head中
style 写样式属性
eg：可以只修改一处，减少维护复杂度
只对一个网页起作用-->
<style>
div{
color: blue;font-size: 26px;
}
</style>
</head>
<body>
<!--第一种样式分为：内联样式（行内样式）：通过style：设置元素样式
eg：只能对一个标签生效、样式变化时，不方便维护
-->
<p style="color: red;font-size: 30px;">这个是内联样式</p>
<p>这个不会生效</p>
<div>第二种方法01</div>
<div>第二种方法02</div>
<!--第三种 外部样式： 写到css文件内
link 用于引入外部的css文件
href：用于填写路径
eg：样式可以在不同的页面同时使用-->
<link rel="stylesheet" href="grammar.css">
</body>
</html>二、常用选择器，包含id选择器、类选择器、通配符选择器
id选择器：语法：#id名
类选择器：语法：.class名
通配符选择器：语法：*（这是选择网页中所有元素）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用选择器</title>
<!-- 常用选择器
id选择器
语法：#id属性值{}
#box{}
类选择器
语法：.class属性值
通配符选择器
语法：*
选中页面中的所有元素
-->
<style >
#a{
color: yellow;
}
.b{
color: red;
}
*{
color: blue;
}
</style>
</head>
<body>
<p id="a">这是黄色</p>
<p class="b">这是红色</p>
<p>这是蓝色</p>
<p>这是蓝色</p>
</body>
</html>三、复合选择器，包含交集选择器、并集选择器
交集选择器：同时复合多个条件的元素 语法：以元素选择器开头，在选中需要的id或class
并集选择器：可以添加多个选择器分组，用逗号连接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器</title>
<style>
/* 将class red设置为红色 */
.red{
color: red;
}
/* 交集选择器 选中同时复合多个条件的元素
eg：如果其中有元素选择器，则必须以元素选择器开头*/
/* 将class为red的div字体设置为30px */
div.red{
font-size: 30px;
}
.a.b.c{
color: burlywood;
}
/* 选择器分组（并集选择器）
同时选择多个选择器，用逗号连接
用法：.a.b,div.red,div,span*/
h1,span{
color: green;
}
</style>
</head>
<body>
<div class="red">我是div</div>
<div>我不是class 为red的div</div>
<p class="red a b c">我是p</p>
<h1>标题1</h1>
<span>第二个标题</span>
</body>
</html>四、关系选择器，包含子元素选择器、后代元素选择器、选中下一个兄弟、选择中间的兄弟
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关系选择器</title>
<style>
/* 给div.box中的span设置为红色
子元素选择器
语法：父元素>子元素*/
div.box>span{
color: red;
}
/* 后代元素选择器
作用：选择指定元素内的指定后代元素
语法：祖先 后代
蓝色*/
div span{
color: blue;
}
/* 选择下一个兄弟
语法：前一个+后一个
橙色*/
/* 选择中间的兄弟
语法：中间一个~后一个
包后不包前*/
p~span{color: orange;}
</style>
</head>
<body>
<!-- 父元素 直接包含子元素的元素
子元素 直接被父元素包含
祖先元素 直接或间接包含后代的元素，父元素也是祖先元素
后代元素 直接或间接被祖先包含的元素
兄弟元素 拥有相同父元素的元素
-->
<div class="box">我是一个div
<p>
我是div中的p元素
<span>
我是div中的p中的span元素
</span>
</p>
<span>我是div当中的span元素</span>
<div>p中的div</div>
</div>
<span>我是div外的span</span>
<div>我是div二号
<span>
我是div二号中的span元素
</span></div>
</body>
</html>五、 属性选择器，包含5种常用表达方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性选择器</title>
<style>
/* [属性名] 选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定的值结尾的元素
[属性名*=属性值]选择属性值包含某值的元素*/
p[title]{
color: red;
}
p[class=d]{
color: orange;
}
p[title^=e]{
color: yellowgreen;
}
p[title$=fg]{
color: aqua;
}
p[title*=g]{
font-size: 30px;
}
</style>
</head>
<body>
<p title="a">这是第一句red</p>
<p title="b">这是第二句red</p>
<p title="c">这是第三句red</p>
<p class="d">这是第四句orange</p>
<p title="ed">这是第五句yellowgreen</p>
<p title="efg">这是第六句aqua 30px</p>
<p title="ghij">这是第七句30px</p>
</body>
</html>六、 伪类选择器，包含六类常用方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类选择器</title>
<style>
/* 将ul的第一个li设置为红色
伪类：用来描述元素的特殊状态
eg：第一个子元素、被点击的元素、鼠标移入的元素
使用：一般情况下都是用冒号：开头
:first-child 第一个子元素*/
ul>li:first-child{
color: red;
}
/* last: child; 最后一个子元素 */
ul>li:last-child{
color: orange;
}
/* nth: child; 选中第n个子元素
2n表示偶数位的元素
2n+1或odd表示奇数位*/
ul>li:nth-child(3){
color: yellowgreen;
}
ul>li:nth-child(2n){
color: blue;
}
ul>li:nth-child(odd){
font-size: 30px;
}
ul>li:first-of-type{
color: red;
}
/* 上述伪类，根据所有子元素排队 */
/* 同类型元素中排序
first-of-type
last-of-type
nth-of-type*/
/* 否定伪类 not（）
将符合的元素除去 墨蓝*/
ul>li:not(:nth-child(3)){
color: darkblue;
}
</style>
</head>
<body>
<!-- ul>li 自动生成 -->
<!-- ul>li*5自动生产五条 -->
<ul>
<span>出现</span>
<li>第0个红色30px</li>
<li>第一个蓝色</li>
<li>第二个绿色30px</li>
<li>第三个蓝色</li>
<li>第四个30px</li>
<li>第五个橙色蓝色</li>
</ul>
</body>
</html>七、伪元素，包含5种常用语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪元素</title>
<style>
p{
font-size: 20px;
}
span{
font-size: 30px;
}
/* 伪元素 表示页面中一些特殊并不真实存在的元素（特殊位置）
使用：开头
::first-letter 表示第一个字母*/
p::first-letter{
font-size: 50px;
}
/* ::first-line 表示第一行 */
p::first-line{
background-color: aquamarine;
}
/* selection: 表示选中的内容 ; */
p::selection{
background-color: orange;
}
/* ：：before: 表示元素的开始;
eg:需要结合content
而且无法选中*/
div::before{
color: crimson;
content: 'abc';
}
/* ::after 元素的最后
eg:需要结合content
而且无法选中
*/
div::after{
content: 'sz';
color: orange;
}
</style>
</head>
<body>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam quibusdam quo quae omnis incidunt facere placeat iste nesciunt laborum voluptas beatae, laudantium praesentium velit, veniam esse exercitationem sapiente eveniet dolor!</div>
<p>
<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. A modi aliquam ut nulla corporis consequatur error et hic ullam aspernatur, tenetur exercitationem amet id porro harum, excepturi iusto possimus animi.</span>
</p>
</body>
</html>八、 伪类的选择，包含4种常用语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>伪类的选择</title>
<style>
/* link: 用来表示没访问过的链接
*/
a:link{
color: red;
font-size: 30px;
}
/* visited: 用来表示访问过的链接; */
a:visited{
color: blue;
}
/* hover: 鼠标移入时更改状态; */
a:hover{
color: aquamarine;
font-size: 20px;
}
/* active: 鼠标点击; */
a:active{
color: aliceblue;
}
</style>
</head>
<body>
<!-- 1，没有访问过
2，访问过-->
<a href="https://www.baidu.com">访问过的链接</a>
<br><br>
<a href="https://www.baidu.com">未访问过的链接</a>
</body>
</html>
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
