Css负责网页的样式格式选择器{属性值}选择器定位到标签的工具写法分为内联内部外部本章不讲外部!-- 内联 -- !-- 内联优先级高于内部 -- div style color: blue;font-size: 25px;我是div/div内部在head和body标签之间创建style标签在其内部通过选择器来赋予样式选择器分别有元素选择器 元素名称{}id选择器 #id名称{} 一般用于唯一元素类选择器 .class名称{} 一般用于大量元素派生选择器 父级元素 子级元素{} 依据元素在其父级元素中的位置来选择元素子选择器 父类元素{} 直接子集仅自己的下一级伪类选择器 元素伪类 赋予动作样式!DOCTYPE html html head meta charsetutf-8 title/title /head !-- 内部 -- style div{ color: red; font-size: 25px; } #d2{ color: blue; } .div{ } div p{ color: aqua; } /* 直接子元素 表示直接子元素*/ #id1strong{ color: aquamarine; } /* 可以通过逗号给多个选择器添加相同属性 ---选择器组*/ /* 伪类选择器 某些操作后的样式,顺序不可错错了不生效*/ a:link{} a:visited{} a:hover{} a:active{} img{ width: 400px; height: 300px; } img:hover{ width: 350px; height:350px; /* 鼠标变成手指 */ cursor:pointer; } textarea{ width: 500px; height:200px; } /* 当鼠标聚焦时 */ textarea:focus{ color:blue; } /* 过滤器 规则的元素里使用*/ ul li:first-child{ color: red; } ul li:last-child{ color: blue; } ul li:nth-child(2){ color: green; /* 本质是判断 判断这个元素是否是其父类的子类第一个 满足条件才执行 */ #id1 #id2:nth-child(1){ color: aquamarine; } #id1 p:nth-child(1){ color: red; } /style body !-- css写法内联属性名属性值内部外部 -- !-- 内联 -- !-- 内联优先级高于内部 -- div style color: blue;font-size: 25px;我是div/div !-- id选择器 id最好不要相同-- div idd2/div !--class选择器 选择多组 -- div class div/div !-- 派生选择器 依据父级元素来选择元素 -- div p我是正文/p /div !-- 子选择器 -- div div id id1 strong 我是孙子元素 /strong /div strong 我是儿子元素 /strong !-- 以后面的class为主因为代码从左到右加载 -- div class id2,classid3woshiid3/div a href https://www.baidu.com target _blank百度一下/a img src../img/图片1.png/ textarea/textarea ul liruanjian/li lic/li lijava/li /ul /div div id id1 !-- div id id2 1/div -- p id id32/p /div /body /html边框定义元素的边框宽度 样式及颜色选 择 器 {border:边框宽度边框样式边框颜色 ;}border-radius:设置圆角 50%则为圆元素水平居中margin: 0 auto;文本color 颜色text-align :默认左对齐center居中right右对齐letter-spacing 字体间距text-indent 首行缩进字体font-size 字体的大小font-family 字体的样式font-weight 字体的粗细只能是100的整数!DOCTYPE html html head meta charsetutf-8 title/title /head style #d1{ border: 2px solid blue; /* 文本靠右 */ /* text-align: right; */ /* 文本间距 */ letter-spacing: 5px; /* 首行缩进 */ text-indent: 10px; font-family: 宋体; /* 字体大小 */ font-size :30px; /* 加粗 默认bold 必须是100的倍数*/ font-weight:500; } /* 圆的写法 */ #circle{ width: 100px; height: 100px; border: 5px solid blue; border-radius:50% ; background-color: #15CF8C; /* 白色#fff */ } #circle:hover{ background-color: #fff; cursor:pointer; } /style body div idd1文本/div div idcircle/div /body /html背景图片background-image:url()重复方式调整图片的展现形式background-reapt:reapt no-reapt reapt-x reapt-ybackground-size:contain图片刚好完整的放在容器内有留白 cover完全铺满整个容器有裁剪列表list-style-type图标list-style-image元素显示形式块元素block 可以设置宽高换行准确的来说应该是独占一行行内元素inline 不可设置宽高和换行行内元素inline-block 可以设置宽高不换行可以通过display改变元素的展现形式打破规则溢出处理overflow: visible hidden scroll auto(看是否超过来添加滚轮)box-sizing如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width和 height 中不设置则是分开独立计算