什么是css？
通配符选择器
<head>/* *通配符选择器 匹配任何元素 */*{margin: 0;padding: 0;}</head>
css样式有三种
一种是内嵌，写在head的style里面
<style>div{/*内嵌的css*/width: 200px;height: 200px;background: blue;}</style>
一种是外链，写在单独的.css文件里面
通过link标签（link + tab）填写路径的.css文件名即可
<head><meta charset="UTF-8"><link rel="stylesheet" href=""><title>css</title></head>
一种是标签，直接写在标签里面
<body><div style="width: 200px;height: 200px;background: lawngreen"></div></body>
优先级：标签样式>内嵌样式 >外链样式
因为存在三种方法，所以在开发中总会产生耦合，所以存在一个选择器的概念
优先级：id选择器>class选择器>标签选择器
选择器
用于准确的选中元素，赋予样式
选择器权重
谁的权重大，就听谁的，谁的权重大，就用谁的样式
1 class选择器
通过标签的class属性，选择对应的元素，借助类的概念，一处定义，多处使用
2 id选择器
通过标签的id属性，选择对应元素。注：id选择器唯一
3 群组选择器
可以同时选择多个标签的选择器
4 层次选择器
分为兄弟，子代，相邻，后代，四种选择器
class选择器（.class名）借助类的概念，一处定义，多处使用
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css</title><style>.wrap{background: aqua;}</style></head><body><div class="wrap">3</div><div class="wrap">4</div></body></html>
id选择器（.id名）id选择器唯一
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>css</title><style>#box{background: red;}</style></head><body><div id="box">2</div></body></html>
群组选择器（群组选择器 对几个有相同属性的选择器进行样式设置 两个选择器之间必须用逗号隔开）
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>选择器</title><style>*{margin: 0;padding: 0;}/*群组选择器，逗号分隔，都拥有样式属性*/div,p{width: 100px;height: 50px;background: lawngreen;}</style></head><body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div></body></html>
层次选择器
兄弟选择器(~)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>选择器</title><style>*{margin: 0;padding: 0;}/*兄弟选择器 操作的对象是该元素下（下方）的所有兄弟元素*/div~p{width: 100px;height: 50px;background: lawngreen;}</style></head><body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div></body></html>
子代选择区（>）只会选儿子，不会选孙子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>选择器</title><style>*{margin: 0;padding: 0;}/*子代选择器 选择某个元素下面的子元素*/div>p{width: 100px;height: 50px;background: lawngreen;}</style></head><body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div></body></html>
相邻选择器：（+）同级元素相邻！隔开就不行
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>选择器</title><style>*{margin: 0;padding: 0;}/*相邻选择器操作的对象是该元素的同级元素选择div相邻的下一个兄弟元素选择到紧随目标元素后的第一个元素挨着的兄弟元素*/div+p{width: 100px;height: 50px;background: skyblue;}</style></head><body><div>div1</div><p>p1</p><p>p2</p><div><p>p3</p><p>p4</p></div></body></html>
后代选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>li{list-style: none;}/*后代选择器 之后要是后代*/div li{width: 100px;height: 50px;background: aqua;}</style></head><body><div><ul><li>1</li><li>2</li><li>3</li></ul><ol><li>1</li><li>2</li><li>3</li></ol></div><ul><li>1</li><li>2</li><li>3</li></ul></body></html>
复杂后代选择器 优先级的比较
1.先比id(最高位) class（中间位） tagName（个数位）
1 2 3
2.id选择器个数不相等，id越多，优先级越高
3.id选择器个数相同,则看class,class多的优先级高
4.class个数相等，就看tagName个数
伪类选择器
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>伪类选择器</title><style><!--顺序不能乱-->/*LoVeHAte*/a:link{/*link 未被点击的链接*/color: red;}a:visited{/*已被点击的链接*/color: green;}a:hover{/*鼠标悬停其上的元素 这个一定要掌握*/color: yellow;}a:active{/*鼠标已经再其上按下但是还没有释放的元素*/color: blue;}</style></head><body><a href="">baidu</a></body></html>
重点了解hover：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width: 100px;height: 100px;background: skyblue;}div:hover{/*div:hover 改变的是div本身*/background: red;width: 300px;height: 200px;cursor: pointer;/*手指*//*cursor: default; 箭头*//*cursor: wait; 等待*//*cursor: help;*/}div:hover p{/*div:hover p 当div被鼠标划入的时候 改变后代p*/width: 50px;height: 30px;background: aqua;}</style></head><body><div><p></p></div></body></html>
css文字属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*设置网页字体*//*html{*//*font-size: 20px;*//*}*//*font-family 字体类型浏览器默认的字体是微软雅黑，字体中有多个字体的时候，如果前面的字体没有就使用后面的字体*/.box1{font-family: Arial,Algerian;}/*font-size 字体大小单位 px rem % empx 谷歌浏览器默认字体大小16px,最小是12pxrem 相对于html(根标签)的字体大小em 等于父级的字体尺寸——相对于父级字体大小而言的% 相对于父容器中字体的%调整 这个要知道*/.box2{font-size: 32px;}.box3{font-size: 12px;}.box4{font-size: 2rem;}.box5{font-size: 2em;}/*font-weight 字体粗细关键字normal 默认字体lighter 较细bold 加粗 这个要知道bolder 很粗给值只能100-900的整百数400相当于正常的700相当于bold*/.box6{font-weight: lighter;}.box7{font-weight: 700;}/*font-style 字体类型normal 默认 文字正常italic 文字斜体（属性）oblique 文字斜体*/.box8{font-style: italic;}/*color 文字颜色关键字英文单词 red green16进制（0-9 a-f）#5544aa #54a #abd456#dddddd #dddrgb(0-255,0-255,0-255)r redg greenb bluergba(0-255,0-255,0-255,0-1)r redg greenb bluea alpha(透明度)0 完全透明1 完全不透明*/.box9{/*color: red;*/color: rgb(255,25,10);}.box10{/*color: #29aa60;*/color: rgba(255,25,10,0.5);}</style></head><body><div class="box1"> hello word 123 你好</div><div class="box2"> hello word 123 你好</div><div class="box3"> hello word 123 你好</div><div class="box4"> hello word 123 你好</div><div class="box5"> hello word 123 你好</div><div class="box6"> hello word 123 你好</div><div class="box7"> hello word 123 你好</div><div class="box8"> hello word 123 你好</div><div class="box9"> hello word 123 你好</div><div class="box10"> hello word 123 你好</div><div style="font-size: 20px">1<div style="font-size: 2em">2</div></div></body></html>
css文本属性
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>/*white-space: 换行方式normal 正常换行nowrap 不换行*/div{width: 200px;background: skyblue;white-space: nowrap;/*超出隐藏*/overflow: hidden;/*省略号*/text-overflow: ellipsis;}/*text-indent 首行缩进（em）line-height 行高 *****letter-spacing 字距word-spacing 词距*/.box{width: 300px;text-indent: 2em;line-height: 30px;letter-spacing: 2px;}/*div中的文字垂直居中：line-height:值。值等于div的高度。line-height: 80px;text-align 文本水平对齐方式left 默认值 向左对其rightcenter ******/.box1{text-align: center;}/*text-transform 文本大小写none 默认值 无转换发生uppercase 转换成大写lowercase 转换成小写capitalize 将英文单词的首字母大写*/div{text-transform: uppercase;}</style></head><body><div>Python是纯粹的自由软件， 源代码和解释器CPython遵循 GPL(GNU General Public License)协议。Python语法简洁清晰，特色之一是强制用空白符(white space)作为语句缩进。</div><p class="box">Python是纯粹的自由软件， 源代码和解释器CPython遵循 GPL(GNU General Public License)协议。Python语法简洁清晰，特色之一是强制用空白符(white space)作为语句缩进。</p><p class="box1" style="background: skyblue;height: 50px;line-height: 50px;">你好哇</p></body></html>
css背景
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>div{width: 600px;height: 400px;/*background-color: skyblue;*//*background-image: url("img/0.jpg");*//*background-repeat: no-repeat;*//*background-repeat: repeat-x;*//*background-repeat: repeat-y;*//*background-size: contain;*//*background-position: 90px;*/background: skyblue url("img/0.jpg") no-repeat center center/300px 300px;/*background: color image repeat position/size*/}/*background-color 背景色background-image 背景图片background-repeat 背景平铺repeat 平铺 默认repeat-x 平铺xrepeat-y 平铺ynp-repeat 不平铺注意：只有背景图片的宽高小于被设置的元素的宽高，才会有平铺效果background-position 背景位置 x轴 y轴x轴 left center righty轴 top center bottom如果只给一个值，默认在x轴，y轴默认center(50%)% pxbackground-size 背景大小% px给一个值的时候，默认x轴，y轴默认auto auto会等比缩放cover 等比例缩放直到铺满x,y轴 可以铺满整个框 但是不一定能看到完整的图片contain 等比例缩放x轴或者y轴其中的一个方向 不一定铺满 但是可以看到整个图片*/</style></head><body><div></div></body></html>
