前端之CSS
层叠样式表(口红，美甲，眉笔，化妆盒)
注释
/*单行注释*/
/*
多行注释
*/
语法结构
选择器 {属性:属性值;属性:属性值;属性:属性值;}
三种引入css样式的方式
head内style标签内部直接书写css代码
link标签引入外部css文件
直接在标签内通过style属性书写css样式
ps:注意页面css样式通常都应该写在单独的css文件中
学习css的流程
导入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>
1.先学如何查找标签
基本选择器
标签选择器
id选择器
类选择器
通用选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*标签选择器 所有span标签的颜色都是红色*/ /*span {*/ /*color: red;*/ /*}*/ /*id选择器*/ /*#s1 {*/ /*font-size: 24px;*/ /*}*/ /*类选择器*/ /*.c1 {*/ /*color: orange;*/ /*}*/ /*通用选择器*/ /** {*/ /*color: blue;*/ /*}*/ </style> </head> <body> <span id="s1">span</span> <div class="c1">div <p>p <span>span</span> </p> </div> <div class="c1">div</div> </body> </html>
组合选择器
后代选择器
儿子选择器
毗邻选择器
弟弟选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*后代选择器 div里面所有的span标签都变成蓝色 子子孙孙*/ /*div span{*/ /*color: blue;*/ /*}*/ /*儿子选择器*/ /*div>span {*/ /*color: red;*/ /*}*/ /*毗邻选择器 对下不对上*/ /*div+span {*/ /*color: blue;*/ /*}*/ /*弟弟选择器 对下不对上*/ div~span { color: deeppink; } </style> </head> <body> <span>我是div上面的span</span> <div> <span>我是div里面的第一个span</span> <p>我是div里面的第一个p <span>我是div里面的第一个p里面的span</span> </p> <span>我是div里面的第二个span</span> </div> <span>我是div下面的第一个span</span> <span>我是div下面的第二个span</span> </body> </html>
属性选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*只要有xxx属性名的标签都找到*/ /*[xxx] {*/ /*color: red;*/ /*}*/ /*只要标签有属性名为xxx并且值为1*/ /*[xxx='1'] {*/ /*color: blue;*/ /*}*/ /*规定p标签内部必须有属性名为xxx并且值为2的标签*/ p[xxx='2'] { color: green; } </style> </head> <body> <span xxx="2">span</span> <p xxx>我只有属性名</p> <p xxx="1">我有属性名和属性值并且值为1</p> <p xxx="2">我有属性名和属性值并且值为2</p> </body> </html>
分类与嵌套
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div {*/ /*color: red;*/ /*}*/ /*p {*/ /*color: red;*/ /*}*/ /*span {*/ /*color: red;*/ /*}*/ /*分组*/ div,p,span { color: blue; } /*嵌套:不同的选择器可以共用一个样式 后代选择器与标签组合使用 */ div p,span { color: red; } </style> </head> <body> <div>div</div> <p>p</p> <span>span</span> </body> </html>
伪类选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a:link { color: red; } a:hover { color: yellow; } a:active { color: black; } a:visited { color: green; } input:focus { background-color: red; } </style> </head> <body> <a href="https://www.baidu.com">百度</a> <a href="http://www.xiaohuar.com">笑话网</a> <a href="http://www.sogo.com">笑话网</a> <input type="text"> </body> </html>
研究选择器优先级
相同选择器 不同的引入方式 就进原则 谁越靠近标签谁输了算
不同选择器 相同的引入方式
行内样式 > id选择器> 类选择器 > 标签选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #p1 { color: green; } /*.c1 {*/ /*color: aqua;*/ /*}*/ /*p {*/ /*color: red;*/ /*}*/ </style> <link rel="stylesheet" href="mycss.css"> </head> <body> <p id="p1" class="c1" style="color: blue">p</p> </body> </html>
2.如何给查找到的标签设置样式
样式修改
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*div {*/ /* 400px;*/ /*height: 100px;*/ /*}*/ /*p {*/ /*font-family: "Sitka Banner", "Arial", sans-serif*/ /*}*/ /*p {*/ /*font-size: 16px;*/ /*font-weight: lighter;*/ /*}*/ </style> </head> <body> <div>div</div> <div>div</div> <p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p> </body> </html>
文本颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*color: red;*/ /*color: rgb(0,0,255);*/ /*color: #FF6700;*/ color: rgba(0,0,255,0.8); } </style> </head> <body> <p>以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可</p> </body> </html>
文本属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p { /*text-align: right;*/ /*text-decoration: underline;*/ /*text-decoration: overline;*/ text-decoration: line-through; text-indent: 48px; } a { text-decoration: none; } </style> </head> <body> <p>以把多个字体名称作为</p> <a href="http://www.xiaohuar.com">笑话网</a> </body> </html>
背景属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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> </head> <body> <div></div> </body> </html>
背景图片实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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> </head> <body> <div></div> </body> </html>
边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { /*border- 3px;*/ /*border-style: dashed;*/ /*border-color: deeppink;*/ border: 3px solid red; } </style> </head> <body> <div>div</div> </body> </html>
画圈
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 400px; height: 400px; background-color: red; border: 3px solid black; border-radius: 50%; } </style> </head> <body> <div></div> </body> </html>
display属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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> </head> <body> <div>div</div> <div>div</div> <span>span</span> <span>span</span> </body> </html>
标签通常都必须有的属性
id 用来唯一标识标签
class 标签类属性(******),可以有多个值
ps:你可以把它理解成python面向对象的继承
你可以给任意的标签加任意的属性名和属性值