定制网站建设程序流程,淘宝网站如何做虚拟机,带有网页的建筑公司,百度推广 做网站目录 一、前言二、CSS的复合选择器1、后代选择器①、语法②、注意事项 2、子选择器①、语法②、注意事项 3、并集选择器①、语法②、注意事项 4、链接伪类选择器①、语法②、注意事项 三、CSS元素显示模式转换1、转换为块元素display:block2、转换为行内元素display:inline3、转… 目录 一、前言二、CSS的复合选择器1、后代选择器①、语法②、注意事项 2、子选择器①、语法②、注意事项 3、并集选择器①、语法②、注意事项 4、链接伪类选择器①、语法②、注意事项 三、CSS元素显示模式转换1、转换为块元素display:block2、转换为行内元素display:inline3、转换为行内块元素display:inline-block 四、CSS背景属性1、背景平铺2、背景图片位置3、背景图像固定背景附着4、背景颜色的半透明 五、CSS的三大特征之一-继承性1、行高的继承性 六、总结 一、前言
CSS层叠样式表作为前端开发的核心技术之一为网页赋予了美观和交互性。本文将深入探讨CSS的复合选择器、元素显示模式、背景属性以及其三大特征帮助读者更好地理解和应用CSS。
二、CSS的复合选择器
1、后代选择器
后代选择器又称为包含选择器可以选择父元素里边子元素其写法就是把外层标签写在前面内层标签写在后面中间用空格分隔。当标签发生嵌套时内层标签就成为外层标签的后代
①、语法 语法元素1 元素2 {样式声明} !DOCTYPE html
html langen
headstyle!-- 元素1 元素2 {样式声明} --ol li{color:pink}/style
/head
bodyollihhh/lilihhh/lilihhh/li/olulli你好/lili你好/lili你好/lili你好/li/ul
/body
/html②、注意事项
元素1和元素2中间用空格隔开元素1是父级元素2是子级最终选择的是font colorred元素2元素2可以是儿子也可以是孙子等只要是元素1的后代即可元素1和元素2可以是任意基础选择器
2、子选择器
子元素选择器子选择器只能选择作为某元素的最近一级子元素
①、语法 语法元素1元素2 {样式声明} !DOCTYPE html
html langenheadstyle.nava {color: red;}/* .nav pa {color: red;} *//style
/headbodydiv classnava href#我是儿子/apa href#我是孙子/a/p/div
/body/html修改“我是孙子”为红色 !DOCTYPE html
html langenheadstyle/* .nava {color: red;} */.nav pa {color: red;}/style
/headbodydiv classnava href#我是儿子/apa href#我是孙子/a/p/div
/body/html②、注意事项
元素1和元素2中间用大于号隔开元素1是父级元素2是子级最终选择的是元素2元素2必须是亲儿子其孙子、重孙子之类都不归它管也可以叫它亲儿子选择器
3、并集选择器
并集选择器可以选择多组标签同时为它们定义相同的样式。通常用于集体声明 并集选择器是各选择器通过英文逗号,连接而成任何形式的选择器都可以作为并集选择器的一部分
①、语法 语法元素1元素2 {样式声明} !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylediv,p {color: red;}/style
/headbodydiv并集选择器1/divp并集选择器2/p
/body/html②、注意事项
元素1和元素2中间用逗号隔开逗号可以理解为和的意思并集选择器通常用于集体
4、链接伪类选择器
①、语法
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 1.未访问的链接a:link 把没有访问过的点击过的链接选出来 */a:link{color: black;/* 取消下划线 */text-decoration: none;}/* 2.选择点击过的访问过的链接 */a:visited{color: burlywood;}/* 3.选择鼠标经过的那个链接 */a:hover{color:pink}/* 4.选择的是我们鼠标正在按下还没有谈起鼠标的那个链接 */a:active{color: blueviolet;}/style
/headbodya href#小猪佩奇/a
/body/html②、注意事项
为了确保生效请按照LVHA的循顺序声明:link - :visited - :hover - :active因为a链接在浏览器中具有默认样式需要给链接单独制定样式
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle/* 设置链接为黑色并取消下划线 */a{color: black;text-decoration: none;}/* 3.选择鼠标经过的链接并显示下划线 */a:hover{color:pink;text-decoration:underline;}/style
/headbodya href#小猪佩奇/aa hrefwww小点读猪佩奇/a
/body三、CSS元素显示模式转换
1、转换为块元素display:block
headstylea{width: 240px;height: 30px;background-color: palegoldenrod;/* 把行内元素a转换为块级元素 */display: block;}/style
/head
bodya href#百度/aa href#谷歌/a
/body
/html2、转换为行内元素display:inline
headstylediv{
/* width: 240px; */
/* height: 30px; */background-color: aquamarine;/* 把div 块级元素转换为行内元素 */display: inline;}/style
/head
bodydiv小猪佩奇/divdiv苹果/div
/body
/html如果使用display: inline的话则width、height不生效 3、转换为行内块元素display:inline-block
headstylespan{width: 300px;height: 30px;background-color: coral;display: inline-block;}/style
/head
bodyspan行内元素转换为行内块元素/spanspan行内元素转换为行内块元素/span
/body
/html如果使用display: inline-block的话则width、height生效 四、CSS背景属性
1、背景平铺 background-image: url(image/0001.png);
/* 1.背景图片不平铺 */
background-repeat: no-repeat;/* 2.默认的情况下背景图片时平铺的 */
background-repeat: repeat;/* 3.沿着x轴平铺 */
background-repeat: repeat-x;/* 4.沿着y轴平铺 */
background-repeat: repeat-y;
2、背景图片位置
/* 背景图片位置
* 如果指定的两个值都是方位名词则两个值前后顺序无关
* 如果只指定了一个方位名词另一个值省略则第二个值默认
* 居中对齐*/
background-position: center top;background-position: right center;background-position: 20px center;3、背景图像固定背景附着 background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动background-attachment后期可以制作视差滚动的效果 #背景图像是随对象内容滚动(默认的是scroll滚动的)
background-attachment: scroll#背景图像固定
background-attachment: fixed4、背景颜色的半透明
background: rgba(0,0,0,0.3)五、CSS的三大特征之一-继承性
1、行高的继承性 语法 body{font: 12px/1.5 Microsoft YaHei;
}行高可以跟单位也可以不跟单位如果子元素没有设置行高则会继承父元素的行高为1.5此时子元素的行高是当前子元素的文字大小*1.5body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高
六、总结
CSS的复合选择器、元素显示模式、背景属性以及其三大特征共同构成了CSS的核心部分。通过深入理解这些概念开发者可以更灵活地控制元素的样式和外观从而创造出更精美、交互性更强的网页。
