<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css基础</title>
<style>
h4{
color: yellow;
size: 60px;
}
:link{
color: blue;
}
:visited {
color: yellow;
font-size: 50px;
}
a:hover{
font-size: 50px;
}
:active{
color: gray;
}
p:hover{
font-size: 50px;
}
</style>
</head>
<body>
<!--
三种方式通过css来设置文本样式
一（内联样式、行内样式）
在标签内使用style属性来设置样式
一般不推荐使用
二（内部样式表）
将样式编写到head中国到style标签里
然后通过css的选择器来选中元素并为其设置各种样式
三（外部样式表）最佳实践
可以将css样式编写到一个外部的css文件中
然后通过link标签来引入外部的css文件
外部样式表需要link标签进行引入
意味着只要想使用这些样式的网页都可以对其进行引用
使样式可以在不同网页页面之间进行复用
将样式编写到外部css文件中可以使用到游览器的缓存机制
从而加快网页的加载速度提高用户的体验
四种常用选择器
1、元素选择器
作用：根据标签名来选中指定元素
语法：标签名{}
例子：p{} h1{} div{}
2、id选择器
作用：根据元素的ID值选中指定元素
语法：#id属性值{}
例子：#box{}
3、类选择器
作用：根据元素的class属性值选中一组元素
语法：.class属性值{}
4、通用选择器
作用：选中页面中所有元素
语法：*{}
两种复合选择器
1、交集选择器
作用：选中同时复合多个条件的元素
语法：选择器1选择器2选择器3选择器4{}
注意点：交集选择器中如果有元素选择器，必须使用元素选择器开头
2、并集选择器
作用：同时选择多个选择器对应的元素
语法：选择器1，选择器2，选择器3，选择器4{}
关系选择器
1、子元素选择器
作用：选中父代的指定子代
语法：夫>子
2、后代选择器
作用：选中指定元素内的指定后代元素
语法：祖先 后代
3、兄弟选择器
(1)作用：选中下一个兄弟
语法：前一个+后一个
（2）作用：选中下面的所有兄弟
语法：兄～第
属性选择器
1、语法：[属性]
作用：选择含有指定属性的元素
2、语法：[属性=属性值]
作用：选择含有指定属性和属性值的元素
3、语法：[属性^=属性值]
作用：选择属性值以指定值开头的元素
4、语法：[属性$=属性值]
作用：选择属性值以指定值结尾的元素
5、语法：[属性*=属性值]
作用：选择包含指定属性值的元素
伪类选择器
伪类：不存在的类特殊的类
伪类用来描述一个元素的特殊状态，
比如：第几个元素，点击的元素，访问过的元素，鼠标移入的元素
伪类一般情况下都是用：开头
:first-child 第一个子元素
:last-child 最后一个子元素
:nth-child(i) 第i个子元素
特殊值： n所有元素
2n 或 even所有偶数元素
2n+1 或 odd 所有奇数元素
以上的伪类根据所有元素排序
:first-of-type
:last-of-type
:nth-of-type
以上根据指定类型的元素排序
:not()
否定伪类：将符合条件的伪类从选择器中剔除
a标签中的伪类
：link 正常的标签（未访问过的标签）
：visited 访问过得标签，因隐私原因只能修改颜色
：active 鼠标点击的标签
：hover 鼠标移入的状态
伪元素选择器
伪元素：表示页面中特殊的不是真实存在的元素（特殊位置）
用::开头
::first-letter 第一个元素
::first-line 第一行
::selection 选中的元素
::before 元素的开始
::after 元素的最后
before和after必须结合content属性来使用
选择器的权重
样式的冲突：用不同的选择器选中相同的元素，并为相同的样式设置不同的值时，
此时发生了样式的冲突
发生样式的冲突时应用哪个样式，由选择器的权重（优先级）决定
选择器的优先级
内联样式 1，0，0，0
id选择器 0，1，0，0
类和伪类选择器 0，0，1，0
元素选择器 0，0，0，1
统配选择器 0，0，0，0
继承的样式 没有优先级
比较选择器的优先级时应该将所有的优先级相加然后进行比较，
但是在相加时不能超过最高优先级的位数
当一个样式的最后加上！important后该样式的优先级最高（一般不用）
-->
<p>woxiangkankansizehefantsizeddequbei</p>
<p style="font-size: 50px" >woxiangkankansizehefantsizeddequbei</p>
<a href="#abc">点击跳转</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="" name="abc">跳转</a>
<p style="color: red;size: 50px;">方案一的实现</p>
<a href="">cheshi</a>
<h3 title="sgsdabc">方案二的实现</h3>
<h6>方案三的实现</h6>
<link rel="stylesheet" href="./style.css">
</body>
</html>
html,css,js学习代码.zip
需积分: 0 105 浏览量
2023-12-30
12:42:31
上传
评论
收藏 11KB ZIP 举报
html,css,js学习代码.zip （14个子文件） 
code_111230 
style.css 38B .gitattributes 66B
js基础.html 702B css基础.html 6KB .idea workspace.xml 12KB misc.xml 174B webstorm.iml 281B modules.xml 268B html常用标签.html 3KB 盒子模型.html 1KB 列表.html 1KB index.html 3KB html5新增.html 379B text.html 407B资源评论
