1.Typora使用方法2.CSS分类行内样式表在写的时候一定要写到开始标签里面p写在这/p3.CSS选择器p是选择器color是属性属性与属性值采用键值对的方式一定要记得标点符号属性名属性值选择器分类3.1基础选择器3.1.1类型选择器!-- 若给同一个选择器先年后加了不同的样式后写的样式覆盖先写的样式 --div {color:red;font-size: 20px; }div {color:blue;font-size: 20px;}则最终样式为蓝色后来者居上/就近原则HTML省略微!-- --CSS省略为/* */CSS书写规范3.1.2类选择器想选取1个或者多个元素时使用类选择器的权重优先级高于 类型选择器3.1.3 id选择器只可以选择1个具有唯一性id喜欢用下划线连接英文单词id选择器比类选择器优先级更高id选择器和类选择器的区别3.1.4通配符选择器1.div classheaderdiv2.width: 1000px;3.hight: 40px;注意1.根据Emmet语法也可以写.header回车自动生成上方代码div classheaderdiv 。w1000 h40也可以达到上方2.3.代码的效果2.画盒子将屏幕分成一条一条的需要宽高背景颜色width不用写默认是和浏览器一样宽height高要写如果更改width宽度盒子默认向左对齐。3.color 颜色 width宽 height高 font-size字体大小 background-color背景颜色4.让块级元素在浏览器中水平居中对齐margin: 0 auto;5.通配选择器只需要在style里面写就可以了3.2关系选择器由两个选择器进行组合3.2.1 后代选择器(选择.box里面的p元素)不止两层三层也可以最少两层即可下面两个都可以做到对特定盒子下的a做修好最终结果关于我们联系我们隐私政策 字体呈现为粉色div下的所有a标签div a {color: pink;}类名叫footer的元素下的所有a标签.footer a {color: pink;}div classfootera href#关于我们/aa href#联系我们/aa href#隐私政策/a/div3.2.2 子代选择器3.2.3兄弟选择器1 邻接兄弟选择器2通用兄弟选择器注意1.这两个优先级应该是一样的2.在Emmett语法里面在body中输入 ulli 最后会得到ulliliul3.总结后代选择器是重点图片本身默认是行内元素默认左对齐。如果图片宽度小于 610px可以使用CSS技术让它等比例放大到610px:.content img {display: block;让图片变成块级元素独占一行方便布局。width: 100%;图片宽度等于父容器内容区宽度也就是 610px。height: auto;高度自动计算保持等比不变形。}4.CSS文本样式字体样式 文本布局CSS 文本样式用于控制网页中文字的外观包括字体、颜色、对齐、间距等主要分为两大类1. 字体样式使用哪种字体 字体大小字体粗体、 斜体等等2.文本布局文本对齐、行高、 字间距、首行缩进等注意文字是无法直接通过CSS来更改样式的必须要用适合的标签来包裹它们本质是修改标签样式里面文字跟随样式变化先有标签再去修改文字样式4.1 字体样式字体族哪一种字体字体风格字体是否倾斜字体装饰给字体设置上划线下划线删除线4.1.1 字体颜色color注意raba(155,0,0,0.3)为文字透明前三个仍为rgb最后一个为文字透明程度取值0-1。0是完全透明1是完全不透明。.6代表0.6,0可以省略。4.1.2字体族 font-family字体族一般都是加到body标签里面的衬线体宋体和仿宋有尖尖不一样宽无衬线体黑体和微软雅黑每个角角都一样宽4.1.3字体大小 font-size可简写为fz10得到font-size: 10px;4.1.4字体风格 font-stylei 不同性质的文字默认斜体em 强调浏览器默认样式是斜体不加倾斜同样可以表示强调。4.1.5 字体粗体 font-weight如果页面中只有一个地方需要加粗那么使用html中的strong标签进行加粗即可如果有大批量的模块需要加粗可以使用css 中的加粗 进行一次性加粗如果用了h2标签是默认加粗的可以用取消加粗。4.1.6字体装饰 text-decoration链接a是有下划线的可以通过none取消下划线。在style里面写td会自动生成text-decoration。删除线除了用CSS也可以用标签del.4.2文本布局4.2.1文本对齐 text-align1.只能控制块级元素对齐对行内元素无法控制2.只能控制水平对齐垂直无法控制简写tac4.2.2 首行缩进 text-indent快速ti2em4.2.3 字间距 letter-spacing用于设置文本字符的间距p {letter-spacing: 30px;}属性值数字letter-spacing 会给每一个字符后面都加 30px 的间距包括最后一个字:[电] 30px [影] 30pxtext-align: center 是把包括这段尾部空白在内的整个文本宽度去居中于是视觉上文字就整体往左偏了解决办法将letter-spacing改小就可以了4.2.4 行高 line-height行高变大上下间距等比例变大。对于大多数字体上间距一般比下间距大一点所以恰好行高与盒子高度相等时文字会略微下沉。.box {width: 120px;height: 50px;background-color: pink;margin: 0 auto;text-align: center;/* 3.字间距 */letter-spacing: 5px;/* 行高等于盒子高度可以让单行文本垂直居中对齐 */line-height: 50px;}width: 120px 粉色盒子宽 120pxheight: 50px 粉色盒子高 50pxbackground-color 把这个 120×50 区域填成粉色font-size你没写 文字大小默认 16pxline-height: 50px 行高让文字在 50px 高的盒子里垂直居中总结4.3 font简写font 简写属性在一个声明中设置多个字体属性使用场景 1. 给整个页面设置相关字体样式写法有严格顺序必须写font-size和font-family。4.4 CSS继承性跟文字相关的大部分可以继承其他的不可以如高height5.分组选择器6.伪类选择器6.1状态伪类选择器6.1.1 链接伪类链接伪类用于根据链接的不同状态如未访问、悬停、点击等为其添加样式从而提升用户体验和界面交互性。active指的是鼠标被点击的状态6.1.2用户行为伪类用户以某种方式和文档交互的时候应用这些用户行为伪类有时叫做动态伪类使用场景1. 鼠标经过元素的时候修改样式。2. 表单获得焦点的时候动态伪类 作用 :hover鼠标经过元素:focus获得焦点的元素表单div {background-color:pink;}div: hover {background-color: red;}6.2 结构伪类选择器根据元素的位置选择目标元素。使用场景1.选择第1个或者最后一个或者第n个元素不是从0开始注意公式中的n取值从0开始计算错误辨析原因分析.data:nth-child(1)的意思是选择 class 为data的元素并且它必须是其父元素的第 1 个子元素。你的table classdata确实是body的第 1 个子元素所以这条规则命中了整个table于是整个表格都变成蓝色了。它并没有去选表格里的第一行。.datatr:nth-child(...) 中的空格表示“后代”即选中 .data 内部的 tr再按 nth-child 过滤。而 .data:nth-child(...) 没有空格选的是 .data 元素本身。新代码解释border-collapse:collapse/* 让表格和单元格的相邻边框合并 */代码效果展示旧新6.3表单伪类选择器7.伪元素选择器.nav 类选择器:hover 伪类选择器before 伪元素选择器代码辨析stylep::first-letter {color: orange;}p::first-line {color: red;}/stylebodyp伪元素选择器1.伪元素选择器是通过元素的特殊状态来选择元素的br最终结果第一个字显示橙色是因为::first-letter的作用层级在::first-line之上属于浏览器对这两个伪元素的特殊层叠处理即::first-letter本身对第一个字有更高的应用层级。8.属性选择器根据元素的属性特征来精准定位元素从而实现更灵活的样式控制。9.CSS优先级简写妙招.navullia即div classnavullia href#首页/aliuldivCSS三大特性总结