【Web前端】CSS（一）——基础语法与选择器

文章目录1.什么是CSS2.CSS基本语法规范3.CSS引入方式3.1 内部样式表3.2 行内样式表3.3 外部样式4.选择器的种类4.1 常见的选择器4.2 基础选择器4.2.1 标签选择器4.2.2 类选择器4.2.3 id选择器4.2.4通配符选择器4.2.5 基础选择器小结4.3 复合选择器4.3.1 后代选择器4.3.2 子选择器4.3.3 并集选择器4.3.4 伪类选择器4.3.5 复合选择器小结1.什么是CSSCSS层叠样式表Cascading Style SheetsCSS能够对网页中元素位置的排版进行像素级精确控制实现美化页面的效果能够做到页面的样式和结构分离CSS控制页面的展示效果html决定页面的结构2.CSS基本语法规范选择器 {一条/N条声明}选择器决定针对谁修改找谁声明决定修改啥干啥声明的属性是键值对使用;区分键值对使用:区分键和值stylep{color:red;font-size:40px;}/style在上面的代码中p是选择器color: red;font-size: 40px;是声明。注意CSS要写到style标签中style标签可以放在页面的任何位置一般放到head标签内CSS使用/* */作为注释显示效果3.CSS引入方式CSS引入方式有三种内部样式表行内样式表外部样式3.1 内部样式表将CSS嵌套到html页面中通过style标签嵌套理论上来说style放到html的哪里都可以但是一般放在head标签中优点能够让样式和页面的结构分离缺点分离的不够彻底尤其是当CSS内容多的时候3.2 行内样式表通过style属性来指定某个标签的样式只适合写简单样式只针对某个标签生效缺点不能写太复杂的样式这种写法优先级较高会覆盖其他的样式stylediv{color:red;}/styledivstylecolor:green;这里div的颜色与style属性中的颜色相同/div可以看到,red颜色被覆盖了3.3 外部样式外部样式是实际开发中最常用的样式创建一个css文件使用link标签引入css link rel“stylesheet” href“[CSS文件路径]”创建html文件!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlelinkrelstylesheethrefcss/test02.css/headbodyphello css/p/body/html创建css文件p{color:blue;font-size:40px;}显示效果注意不要忘记link标签调用css否则不生效优点样式和结构完全分离缺点收到浏览器缓存的影响修改之后不一定立刻生效。关于缓存这是计算机中一种常见的提升性能的技术手段网页依赖的资源图片/CSS/JS等通常是从服务器上获取的如果频繁访问该网站那么这些外部资源就没必要反复从服务器获取就可以使用缓存先存起来就是存在本地磁盘上从而提高访问效率可以通过 ctrl F5 强制刷新页面强制浏览器重新获取css文件4.选择器的种类4.1 常见的选择器基础选择器单个选择器构成的标签选择器类选择器id选择器通配符选择器复合选择器把多种基础选择器综合运用起来后代选择器子选择器并集选择器伪类选择器更多选择器可以查看CSS选择器参考手册CSS选择器参考手册4.2 基础选择器4.2.1 标签选择器特点能快速将同一类型的标签都选择出来但不能差异化选择style{ p { color: blue; } div { color: green; } }phello css/pphello css/pphello css/pphello css/pdivhello world/divdivhello world/divdivhello world/divdivhello world/div4.2.2 类选择器特点差异化显示不同的标签可以让多个标签使用同一个样式style{ .eat { color: aqua; } .sleep { color: greenyellow; } .game { color: red; } }pclasseat吃饭/ppclasssleep睡觉/ppclassgame打游戏/p语法细节类名用.开头标签中使用class属性定义类名一个类可以被多个标签使用一个标签也能使用多个类多个类名要使用空格分隔这种做法可以让代码更好复用如果是长的类名可以使用 - 分割不要使用纯数字、中文或标签名来命名类名代码示例使用多个类名注意一个标签可以同时使用多个类名这样做可以把相同的属性提取出来达到简化代码的效果style{ .eat { color: aqua; } .sleep { color: greenyellow; } .game { color: red; } .play { font-size: 25px; } }pclasseat吃饭/ppclasssleep睡觉/ppclassplay game打游戏/p4.2.3 id选择器和类选择器类似CSS中使用 # 开头表示id选择器id选择器的值和html中某个元素的id值相同html的元素id不必带#id是唯一的不能被多个标签使用这是id选择器和类选择器最大的区别style{ #id1 { color: red; } #id2 { color: green; } }pidid1这里的id为id1/ppidid2这里的id为id2/p4.2.4通配符选择器通配符选择器在实际开发中一般用来针对页面中所有元素默认样式进行消除主要用来消除边距使用 * 的定义选取所有标签*{background-color:floralwhite;}此时页面中所有元素都被加上了背景颜色4.2.5 基础选择器小结作用特点标签选择器能选出所有相同标签不能差异化选择类选择器能选出一个或多个标签根据需求选择最灵活最常用id选择器能选出一个标签同一个id在一个HTML中只能出现一次通配符选择器选择所有标签特殊情况下使用4.3 复合选择器复合选择器是将基础选择器进行组合得到的4.3.1 后代选择器又叫包含选择器选择某个父元素中的某个子元素元素1 元素2 { 样式说明 }元素1 和 元素2 要使用空格分隔元素1 是父级元素2 是子级只选元素2不影响元素1代码示例将 ol 中的 li 修改颜色不影响 ululliaaa/lilibbb/liliccc/li/ulolliddd/lilieee/lilifff/li/olol li{color:red;}代码示例元素2不一定是儿子也可以是孙子ulliaaa/lilibbb/liliahref#ccc/a/li/ulul li a{color:red;}或者 ul a{color:red;}代码示例可以是任意选择器的组合包括类选择器第选择器olclassoneliddd/lilieee/liliahref#fff/a/liliahref#fff/a/liliahref#fff/a/li/ol.one li a{color:green;}4.3.2 子选择器子选择器和后代选择器类似但只能选中子标签元素1元素2 { 样式声明 }使用大于号分隔只能选子元素不能选孙子元素divclasstwoahref#链接1/apahref#链接2/a/p/div当前代码中链接1为div的子元素链接2为div的孙子元素使用后代选择器会把链接1和链接2都选中.two a{color:red;}子代选择器的写法可以只选中链接1.twoa{color:red;}4.3.3 并集选择器用于选择多组标签集体声明元素1, 元素2 { 样式声明 }通过 逗号 分割多个元素表示同时选中 元素1 和 元素2任何基础选择器都可以使用并集选择器并集选择器建议竖着写每个选择器占一行最后一个选择器不能加逗号代码示例div苹果/divh3香蕉/h3ulli鸭梨/lili橙子/li/ul把苹果和香蕉的颜色改成红色div, h3{color:red;}把苹果、香蕉、鸭梨、橙子都改成红色div, h3, ulli{color:red;}4.3.4 伪类选择器伪类选择器是用来定义元素状态的例链接伪类选择器a:link 选择未被访问过的链接 a:visited 选择已经被访问过的链接 a:hover 选择鼠标指针悬停上的链接 a:active 选择活动链接鼠标按下了但是未弹起示例a href#超链接/a要求默认展示黑色当鼠标悬停在上方时展示红色鼠标按下单没有弹起时展示绿色a:link{color:black;}a:hover{color:red;}a:active{color:green;}默认状态鼠标悬停时鼠标按下但不弹起如何让已访问过的链接恢复成未访问状态清空浏览器缓存即可ctrl shift delete注意事项按照 LVHA 的顺序书写例如把 active 拿到前面就会导致 active 失效浏览器的 a 标签都有默认样式一般实际开发中都需要单独制定样式实际开发中主要给链接做一个样式然后给 hover(鼠标悬停) 做一个样式即可link/visited/active 用的不多a{color:black;}a:hover{color:red;}4.3.5 复合选择器小结选择器作用注意事项后代选择器选择后代元素可以是孙子元素子选择器选择子元素只能选子元素不能选孙子元素并集选择器选择相同样式的元素更好的做到代码重用链接伪类选择器选择不同状态的链接重点a:hover