CSS
CSS快速入门
- 通过link连接
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>你好，欢迎学习CSS！！！</h1> </body> </html>
h1{
color: #571070;
}导入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内联样式-->
<style>
h1{
color: yellow;
}
</style>
<!--外联样式-->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--行内样式-->
<h1 style="color: blue">我是表题</h1>
</body>
</html>style优先级：行内样式最大，其次看哪个离h1近（如上blue>link的color>yellow）
扩展：外部样式两种写法
- 链接式：link方式
- 导入式：CSS2.0，在html页面style里面加@import url（“css地址”）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内联样式-->
<style>
h1{
color: yellow;
}
</style>
<!--外联样式-->
<link rel="stylesheet" href="css/style.css">
<!--导入式：css2.0-->
<style>
@import url(css/style.css);
</style>
</head>
<body>
<!--行内样式-->
<h1 style="color: blue">我是表题</h1>
</body>
</html>选择器
Id选择器全局唯一
优先级：Id选择器>类选择器>标签选择器
层次选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层次选择器</title>
<style>
/*后代选择器 */
body p {
background: red;
}
/*子选择器 一代，儿子*/
body p {
background: blue;
}
/*相邻兄弟选择器 只有一个，相邻（向下）*/
.active + p {
background: yellow;
}
/*通用选择器：通用兄弟选择器，向下所有兄弟*/
.active ~ p {
background: green;
}
</style>
</head>
<body>
<p>p0</p>
<p class="active">p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li><p>p4</p></li>
<li><p>p5</p></li>
<li><p>p6</p></li>
</ul>
<p>p7</p>
<p>p8</p>
</body>
</html>结构伪类选择器
- 伪类a:hover{}
- 结构伪类
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<!--避免使用class，id选择器-->
<style>
ul li:first-child{
background: blue;
}
ul li:last-child{
background: green;
}
/*选中当前元素的父元素的第1个元素,并且是当前元素才生效*/
p:nth-child(1){
background: yellow;/*p0不生效*/
}
/*选中当前元素的父元素的第2个元素*/
p:nth-child(2){
background: yellow;/*生效*/
}
/*选中当前元素的父元素的第1个元素*/
p:nth-of-type(1){
background: red;
}
/*选中当前元素的父元素的第3个元素*/
p:nth-of-type(3){
background: grey;
}
</style>
</head>
<body>
<h1>p0</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
</ul>
</body>
</html>属性选择器
- 属性名[属性]{}
- 属性名[属性=什么]{}
- 正则：属性名[属性*=什么]{} ----表示包含什么
- 正则：属性名[属性^=什么]{} ----表示以什么开头
- 正则：属性名[属性$=什么]{} ----表示以什么结尾
- 正则：属性名[属性^=什么1] [属性$=什么2]{} ----表示以什么1开头并且以什么2结尾
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
a[href="www.baidu.com"]{
background: red;
}
a[href*="www"]{
background: blue;
}
a[href^="http"]{
background: grey;
}
a[href$="www"]{
background: brown;
}
a[href^="1"][href$="1"]{
background: yellow;
}
</style>
</head>
<body>
<a href="www.baidu.com" class="links item first" id="first">a1</a>
<a href="https://www.baidu.com" class="links1 item first" id="first1">a2</a>
<a href="www.baidu.com.cn" class="links2 item first1" id="first2">a3</a>
<a href="1_1www.baidu.com_1" class="links3 item first1" id="first3">a4</a>
<a href="1_2www.baidu.com_2" class="links4 item first2" id="first4">a5</a>
<a href="1_3www.baidu.com_3" class="item first3" id="first5">a6</a>
</body>
</html>字体样式
- font-fanily：英文字体，楷体；
- font-size：50px（em：缩进几个字）；
- font-weight：字体粗细；
- coler：字体颜色；
/*oblique:斜体 bolder:加粗 大小:12px 字体："楷体"*/
p{
font: oblique bolder 12px "楷体";
}- color：rgb（红，绿，蓝）
- color：rgba（红，绿，蓝，颜色深浅）
- text-align：center（文本位置居中）
- text-indent：2em（首行缩进两个字）
- line-height：300px（如：height：300px；当行高和块高相同的时候，可以上下居中）
- 水平对齐，参照物：
/*span里面的文字和文本框的对齐方式
top：span里面的文字在顶部
middle：span里面的文字在中部
bottom：span里面的文字在底部
*/
span,textarea{
vertical-align: bottom;
}- text-decoration：underline（下划线）/line-through（中划线）/overline（上划线）/none（去下划线）
文本阴影和超链接伪类
a:hover{} ----鼠标悬浮的状态
a:active{} ----鼠标按住未释放的状态
text-shadow：#000000 10px 10px 2px； ----阴影颜色，向右偏移，向下偏移，阴影半径
列表样式
- list-style：
- none ----去掉圆点
- circle ----空心圆
- decimal ----数字
- square ----正方形
渐变
- Grabient网址：https://www.grabient.com/
body{
background: linear-gradient(180deg, #FFFFFF 0%, #72ff62 50%, #ff0059 100%);
}盒子模型
margin：外边距
padding：内边距
border：边框
圆角边框：border-radius
盒子阴影：box-shadow：10px 10px 100px yellow；
display: block ----块元素
display: inline-block ----既可以行内元素也可以块元素
display: inline ----行内元素
div {
width: 100px;
height: 100px;
border: 1px solid red;
display: block;
}
span {
width: 100px;
height: 100px;
border: 1px solid blue;
display: inline-block;
}
