1.css的引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {color: red}
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p style="color: deeppink">我是一个p标签</p>
</body>
</html>
三种设置的优先级：标签内设置>文件头部style>外部文件
2.基本选择器
<style>
/*标签选择器 所有span标签的颜色都是红色*/
span {
color: red;
}
/*id选择器，id为s1的元素会被影响*/
#s1 {
font-size: 24px;
}
/*类选择器，class为c1的元素会被影响*/
.c1 {
color: orange;
}
/*通用选择器，*号通配符不解释*/
* {
color: blue;
}
</style>
3.组合选择器
<style>
/*后代选择器 div里面所有的span标签都变成蓝色 子子孙孙，包括div的div的span,无限迭代都要找到所有的span然后去征服他们*/
div span{
color: blue;
}
/*儿子选择器，只能打到儿子，不能动孙子辈以后的*/
div>span {
color: red;
}
/*毗邻选择器 对下不对上，对div下边的同等级的span作用，也就是同一个父亲，与div相邻的那个span*/
div+span {
color: blue;
}
/*弟弟选择器 对下不对上,注意，与上边不同的是，此时div下边的所有span都受影响，不止一个，所以这个不叫毗邻*/
div~span {
color: deeppink;
}
</style>
4.属性选择器
<style>
/*只要有xxx属性名的标签都找到，就是标签中除了class/name等，还有你自定义的属性名，xxx=“”,这种形式的属性*/
[xxx] {
color: red;
}
/*只要标签有属性名为xxx并且值为1*/
[xxx=‘1‘] {
color: blue;
}
/*规定p标签内部必须有属性名为xxx并且值为2的标签，例如：‘<p xxx="2">带有属性的标签且值为2</p>’*/
p[xxx=‘2‘] {
color: green;
}
</style>
5.分组与嵌套
<style>
div {
color: red;
}
p {
color: red;
}
span {
color: red;
}
/*将以上三个可以简化为如下，因为样式一致，这就是分组*/
div,p,span {
color: blue;
}
/*嵌套:不同的选择器可以共用一个样式
后代选择器与标签组合使用，此时注意断句，是div下的p,和span。p和span可没有括号包在一起，逗号就是为了分隔他们两个的,p是属于div的
*/
div p,span {
color: red;
}
</style>
6.伪类选择器
<style>/*四种情况下--没有访问过的；鼠标悬浮；点击；访问过的。focus为鼠标选中输入框时，待输入状态*/
a:link {
color: red;
}
a:hover {
color: yellow;
}
a:active {
color: black;
}
a:visited {
color: green;
}
input:focus {
background-color: red;
}
</style>
7.选择器的优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#p1 {
color: green;
}
.c1 {
color: aqua;
}
p {
color: red;
}
/*id选择器大于类选择器大于元素选择器*/
</style>
<link rel="stylesheet" href="mycss.css">
</head>
<body>
<p id="p1" class="c1" style="color: blue">p</p>
<!--行内样式设置优先级最大，超过style标签中的设置影响-->
</body>
</html>
8.样式修改
<style>
div {
width: 400px;
height: 100px;
}
p {
font-family: "Sitka Banner", "Arial", sans-serif
}/*设置字体*/
p {
font-size: 16px;
font-weight: lighter;
}/*设置字体大小，字体粗细*/
</style>
9.文版颜色
<style>
p {
color: red;
color: rgb(0,0,255);
color: #FF6700;
color: rgba(0,0,255,0.8);
}/*设置字体颜色；可以英文单词，rgb，16进制，支持rgba透明度*/
</style>
10.文本属性
<style>
p {
text-align: right;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-indent: 48px;
}/*文字居中；下划线；上划线；中间线；首行缩进*/
a {
text-decoration: none;
}/*链接的下划线设置*/
</style>
11.背景属性
<style>
div {
width: 400px;
height: 400px;
background-color: green;
background-image: url("1.png");
background-repeat: no-repeat;
background-position: center;
background: no-repeat center url("1.png") blue ;
}/*宽度；长度；背景颜色；图片;图片是否重复；剧中；可以写在一起，无所谓顺序*/
</style>
12.背景图片相关设置
<style>
.box {
height: 400px;
background: url("http://gss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/wh%3D450%2C600/sign=e9952f4a6f09c93d07a706f3aa0dd4ea/4a36acaf2edda3cc5c5bdd6409e93901213f9232.jpg");
background-attachment: fixed;
}/*fixed固定图片位置*/
</style>
13.边框
<style>
div {
border-width: 3px;
border-style: dashed;
border-color: deeppink;
border: 3px solid red;
}/*宽度；线段样式；边框颜色；写在一起也可以，不论顺序*/
</style>
14.画?
<style>
div {
width: 400px;
height: 400px;
background-color: red;
border: 3px solid black;
border-radius: 50%;
}/*radius设置边角的圆度*/
</style>
15.display属性
<style>
div {
display: none;
}
/*inline将块儿级标签变成行内标签*/
div {
display: inline;
}
span {
display: block;
}
/*将选择的标签既具有行内标签特点又有块儿级标签的特点*/
span {
display: inline-block;
height: 400px;
width: 400px;
background-color: red;
border: 3px solid black;
}
</style>
原文地址：https://www.cnblogs.com/xufengfan/p/10946889.html
时间： 2024-10-20 11:46:09