网站后台源码,建网站报价 优帮云,商城网站前台模板免费下载,淘客推广是什么概述
这篇文章是关于 Web 前端 CSS3 的基础语法与盒模型的讲解。包括 CSS3 层叠性及处理冲突规则、伪元素和新增伪类元素、属性选择器等。还介绍了文本与字体属性#xff0c;如段落和行相关属性、字体文本属性。最后阐述了盒子模型#xff0c;如元素隐藏、行内与块元素转换、…概述
这篇文章是关于 Web 前端 CSS3 的基础语法与盒模型的讲解。包括 CSS3 层叠性及处理冲突规则、伪元素和新增伪类元素、属性选择器等。还介绍了文本与字体属性如段落和行相关属性、字体文本属性。最后阐述了盒子模型如元素隐藏、行内与块元素转换、盒子构成及相关属性等。
css3 层叠样式表
css全名叫做层叠样式表层叠性是它很重要的性质多个选择器可以同时作用于同一个标签效果叠加。
css有严密的处理冲突的规则:ID权重 Class权重 标签权重复杂选择器可以通过个数的形式计算权重
项目权重值ID2Class1Tag0
伪元素
1、::before 和::after
在被选元素的内容前面或后面插入额外的内容常用来添加一些装饰性的元素或实现特定的布局效果。
p::before {content: ▶;color: blue;margin-right: 5px;
}p::after {content: ◀;color: green;margin-left: 5px;
}2、::first-letter
用于选择并设置文本块中第一个字母的样式可实现首字下沉等效果。
p::first-letter {font-size: 2em;color: red;float: left;margin-right: 5px;
}3、::first-line
用来选择并设置文本块中第一行的样式比如可以改变第一行文本的字体、颜色、背景等。
p::first-line {font-weight: bold;color: purple;
}4、::selection
用于设置用户选中页面元素时的样式包括文字选中时的背景色和文字颜色等。
p::selection {background-color: yellow;color: black;
}5、::placeholder
用于设置表单输入框中占位文本的样式可调整占位文本的颜色、字体等。
input::placeholder {color: gray;font-style: italic;
}6、::marker
主要用于设置列表项标记如项目符号或数字的样式。
ul li::marker {color: red;font-size: 1.2em;
}新增伪类元素
1、:empty 选择空标签 2、:focus 选择当前获得焦点的表单元素 3、:enabled 和 :disabled 分别匹配可使用启用和不可使用禁用的表单元素。 4、:checked 匹配被选中的表单元素如复选框、单选框。 5、root 选择根元素即html标签
属性选择器
举例意义img[alt]选择有alt属性的img标签img[alt“故宫”]选择有alt属性是故宫的img标签img[alt^“北京”]选择有alt属性是北京开头的img标签img[alt$“夜景”]选择有alt属性是夜景结尾的img标签img[alt*“美”]选择有alt属性中含有美的img标签img[alt~“手机拍摄”]选择有alt属性中有空格隔开的手机拍摄字样的img标签img[alt“参赛作品”]
序号选择器
举例意义:first-child选择父元素的第一个子元素:last-child选择父元素的最后一个子元素:nth-child(n)第n个子元素:nth-of-type(n)选择父元素下指定类型的第n个元素只针对指定类型的元素进行计数和选择而不会考虑其他类型的元素:nth-last-child(n)]从父元素的最后一个子元素开始计数选择第n个元素:nth-last-of-type(n)从父元素的最后一个指定类型的子元素开始计数选择第n个元素
元素关系选择器
名称举例意义子选择器div pdiv的子标签p相邻兄弟选择器imgp图片后面紧跟着的将被选中通用兄弟选择器p~spanp元素之后的所有同层级span元素
文本与字体属性
文本相关的属性普遍具有继承性只需要给祖先标签设置即可在后代所有标签中生效。因为文字相关属性有继承性所以通常会设置body标签的字号、颜色、行高等这样就能当做整个网页的默认样式了。
继承性有一个重要的原则就近原则在继承的情况下选择器权重计算失效而是就近原则。
段落和行相关属性
1、text-indent
设置段落首行的缩进,可以使用长度值如px、em、rem等或百分比来指定缩进量。
p { text-indent: 2em; }2、line-height
设置段落行与行之间的垂直间距即行高。可以是数字、长度值或百分比。数字表示相对于字体大小的倍数长度值直接指定行高的具体尺寸百分比是相对于字体大小的比例。
p { line-height: 1.5; }3、text-align
设置段落文本的水平对齐方式,left左对齐、right右对齐、center居中对齐、justify两端对齐等。
p { text-align: center; }4、letter-spacing
设置字符之间的水平间距,长度值正值会增加字符间距负值会减小字符间距。
p { letter-spacing: 2px; }5、word-spacing
设置单词之间的水平间距长度值用于调整单词之间的间隔距离。
p { word-spacing: 5px; }字体文本属性
1、font-family
指定文本使用的字体族。可以设置多个字体按优先级排列浏览器会依次尝试使用这些字体直到找到可用的字体。
p {font-family: 微软雅黑, Arial, sans-serif;
}2、font-size
设置字体的大小。可以使用多种单位如 px像素、em 、rem、% 等网页文字正文字号通常是16px浏览器最小支持10px字号。
3. font-weight
设置字体的粗细程度。常见取值有 normal正常粗细、bold粗体还可以使用数字值范围从 100 - 900数字越大字体越粗。
strong {font-weight: bold;
}
span {font-weight: 600;
}4、font-style
设置字体的样式主要用于指定文本是否为斜体。取值有 normal正常样式、italic斜体。
5、text-decoration
text-decoration属性用于设置文本的修饰线外观的(下划线、删除线)
p.red-underline {text-decoration-line: underline;text-decoration-color: red;
}盒子模型
在 CSS3 中有多种方法可以隐藏元素每种方法都有其特点和适用场景
元素的隐藏
1、display
该属性值会让元素完全从文档流中移除就好像这个元素在 HTML 文档中不存在一样。它不会占据页面的空间也不会响应任何用户交互事件。
.hidden-element {display: none;
}2、visibility
元素虽然在页面上不可见但它仍然占据原来的空间并且保留其布局位置。也就是说它会影响页面的布局但不会显示内容同时也不会响应鼠标事件等交互操作。
行内元素和块元素的相互转换
在 CSS3 中可以使用display属性来实现行内元素和块元素的相互转换。
1、行内元素转换为块元素
span {display: block;
}2、块元素转换为行内元素
块元素如div、p等默认会独占一行。若要将块元素转换为行内元素需将display属性值设置为inline。
div {display: inline;
}3、转换为行内块元素
还有一种常见的情况是将元素转换为行内块元素即display属性值设置为inline-block。这种方式结合了行内元素和块元素的部分特点元素既可以在一行内显示又可以设置宽度、高度等块级元素的属性。
p {display: inline-block;
}盒子模型
所有的html标签都可以看成柜型盒子由width、height、padding、border构成成为盒模型。
需要注意的是width、height不是盒子的总宽高盒子的总宽度 width 左右padding 左右border盒子的总高度 height 上下padding 上下border
1、box-sizing
在 CSS3 中box-sizing 属性用于定义元素在计算宽度和高度时所采用的盒模型类型它可以改变元素的宽度和高度的计算方式。
2、margin
margin是盒子的外边距即盒子其他盒子的距离竖直方向的margin有塌陷现象:小的margin会塌陷到大的margin中从而margin不叠加只以大值为准。
一些元素比如body、ul、p都有默认的margin在开始制作网页的时候要将他们清除。
盒子的水平居中将盒子的左右两边的margin都设置成auto盒子将水平居中。盒子的垂直居中需要使用绝对定位技术实现。
3、padding
padding是盒子的内边距即盒子边框内壁到文字的距离
4、width属性
width属性表示盒子内容的宽度单位属性通常是px移动端开发也会涉及百分数、rem等单位。
当块级元素div、h、li等没有设置width属性时它将自动撑满但这不意味着width属性可以继承。
5、height属性
height属性表示盒子的内容高度height属性的单位通常是px,移动端开发也会涉及到百分数、rem等单位。
盒子的height属性如果不设置它将自动被其内容撑开如果没有内容则height默认是0。
