CSS简介css全称层叠样式表css也是一种标记语言用于给HTML结构设置样式 eg文字大小、颜色、元素宽高等CSS的编写位置位置1_行内样式写在style中又称内联样式h1 stylecolor: 颜色;font-size: 60px;/h1 颜色的英文可以大写也可小写行内样式表智能控制当前的标签样式CSS语法规范名值位置2_内部样式 style h1{ color: aqua; font-size: 60px; } h2{ color: brown; font-size: 40px; } p{ color: yellowgreen; font-size: 80px; } img{ width: 200px; } /style 可以放在任何地方但一般放在head中位置3_外部样式要写单独的.css文件在HTML中引入使用1.在.css中h1{ color: aqua; font-size: 60px; } h2{ color: brown; font-size: 40px; }2.在HTML中引入.css文件link relstylesheet href./position3.csslink要写在head中CSS样式表优先级优先级优先级规则行内样式内部样式外部样式优先级相同时后来者居上同一个样式中也是后来者居上CSS语法规范语法规范由选择器和声明块组成声明块由一个或多个声明组成声明格式属性名属性值注释/*内容*/ 快捷键Ctrl/CSS代码风格代码风格1.展开风格h1{ color: blue; font-size: 100px; }2.紧凑风格h1{color: blue; font-size: 100px;}CSS基本选择器通配选择器可以选中所有HTML元素* { color: red; font-size: 40px; }元素选择器为页面中某种元素统一设置样式h2{ color: aqua; } p{ color: blue; } h1{ color: blueviolet; font-size: 50px; }类选择器根据元素的class值来选中某些元素.speak{ color: red; } .answer{ color: green; } .big{ font-size: 50px; }class可以写多个值但要用空格隔开p classspeak bigID选择器id不能数字开头 一个元素只能有一个id值 多个元素id值不能重复一个元素可以同时拥有id和class#earthy{ color: red; } #turn_earthy{ color: blue; }CSS复合选择器交集选择器交集选择器中不可能存在两个元素选择器p.beauty{ color: green; }并集选择器又称分组选择器#suxi, .beauty, .dog, .pig, .rich{ font-size: 40px; background-color: pink; width: 180px; }后代选择器先写祖先再写后代ul li{ color: red; } ol li{ color: greenyellow; } ul li a{ color: aqua; } ol li a{ color: blue; } .sj li{ color: black; }子代选择器语法选择器1选择器2选择器3 diva { color: red; } divpa{ color: blue; } .foota{ color: rgb(30, 210, 99); } 兄弟选择器相邻兄弟选择器与指定元下方紧邻的元素下方语法选择器1选择器2{}divp{ color: red; }通用兄弟选择器指定元素后方符合的所有元素语法选择器1~选择器2{}div~p{ color: blue; }属性选择器1选中具有title属性的元素[title]{ color: red; }2:有title属性且值为xxx[titleatguigu1]{ color: blue; }3有title属性且值以a开头[title^a]{ color: greenyellow; }4有title属性且值以u结尾[title$u]{ color: aqua; }5有title属性值中含有u[title*u]{ color: pink; }伪类选择器伪类像类class实际是元素特殊状态的一种描述动态伪类/* 选中的是未访问的a */ a:link{ color: orange; } /* 选中的是访问过的的a */ a:visited{ color: red; } /* 选中的是鼠标悬浮时的颜色 */ a:hover{ color: blue; } /* 选中的是激活状态的a元素 */ a:active{ color:green; }link 超链接未被访问过的状态:visited 超链接访问过的状态:hover 鼠标悬停在元素上的状态:active 元素激活的状态:focus 获取焦点的元素结构伪类first-child 所有兄弟元素中的第一个: last-child 所有兄弟元素中的最后一个: nth-child(n) 所有兄弟元素中的第n个: first-of-type 所有同类型兄弟元素中的第一个: last-of-type 所有同类型兄弟元素中的最后一个: nth-of-type(n) 所有同类型兄弟元素中的第n个: nth-last-child 所有兄弟元素中的倒数第n个: nth-last-of-type 所有同类型兄弟元素中的倒数第n个: only-child 选择没有兄弟的元素: only-of-type 选择没有同类型兄弟的元素否定伪类:not(p) 选择所有p以外的元素UI伪类checked 被选中的复选框或单选按钮enable 可用的表单元素disabled 不可用的表单元素目标伪类target 选中锚点指向的元素语言伪类lang 根据指定的语言选择元素伪元素选择器::before 在元素最开始的位置创建一个子元素::after 在元素最后的位置创建一个子元素::first-line 选中元素的第一行文字::first-letter 选中元素的第一个文字::selectipn 选中被鼠标选中的文字::placeholder 选中输入框的提示文字
