武功网站开发,php网站开发设计论文,龙岩天宫山海拔高度多少,国网典型设计最新版6、CSS三大特性
6.1 层叠性 如果样式发生冲突#xff0c;则按照优先级进行覆盖。 6.2 继承性 元素自动继承其父元素、祖先元素所设置的某些元素#xff0c;优先继承较近的元素。 6.3 优先级
6.3.1 简单分级
1、内联样式2、ID选择器3、类选择器/属性选择器4、标签名选择器/…6、CSS三大特性
6.1 层叠性 如果样式发生冲突则按照优先级进行覆盖。 6.2 继承性 元素自动继承其父元素、祖先元素所设置的某些元素优先继承较近的元素。 6.3 优先级
6.3.1 简单分级
1、内联样式2、ID选择器3、类选择器/属性选择器4、标签名选择器/伪元素选择器5、通配符选择器/子代选择器6、继承样式
6.3.2 复杂分级 格式a, b, c从左到右依次比较全部相同则后来者居上以后面的属性为主。 字母含义aID选择器的个数b类、伪类、属性选择器的个数c元素、伪元素选择器的个数 style/* (1, 3, 5) */div.containterli div.info a#top1span:nth-child(1) {color: red;}/* (1, 1, 2) */a#top1span:nth-child(1) {color: green;}/* 在属性值后面若有!important,则该属性优先级最高 */span.title {color: pink !important;}
/style注意 行内样式权重大于所有选择器!important的权重大于所有选择器包括行内选择器
7、颜色
7.1 常见颜色写法
stylediv {font-size: 50px;}/* 以名称定色 */.one {color: red;}/* 以rgb定色 */.two {color: rgb(0, 255, 0);}/* 以rgba变色 */.three {color: rgb(0, 255, 0, 50%);}/* HEX变色 */.four {color: #0000ff;}/* HEXA变色 */.five {color: #0000ff0f;}
/style7.2 色相环
颜色分布 stylediv {font-size: 50px;}/* hs1(色相, 饱和度, 亮度) 角度 饱和度 亮度*/.one {color: hsl(180, 100%, 50%);}/* hs1a(色相, 饱和度, 亮度, 透明度) 角度 饱和度 亮度 透明度*/.one {color: hsla(180, 100%, 50%, 30%);}
/style8、CSS常见属性
8.1 字体属性
8.1.1 字体大小
style/* 调整字体大小为20px */.one {font-size: 20px;}
/style有时将字体设置的过大或者过小会有个限制这是浏览器的设置导致的。 8.1.2 字体族
查看电脑自带字体或者下载ttf字体文件 style/* 调整字体大小为20px */div {font-size: 20px;}.one {font-family: 楷体;}/* 从前到后选择字体不符合依次向下依赖都没有则选择默认 */.two {font-family: 华文彩云, 微软雅黑;}.three {font-family: 宋体;}
/style8.1.3 字体风格
style/* 调整字体大小为20px */div {font-size: 20px;}/* 默认 */.one {font-style: normal;}/* 斜体使用字体自带的斜体。推荐 */.two {font-style: italic;}/* 斜体。强制倾斜产生的效果 */.three {font-style: oblique;}
/style8.1.4 字体粗细
style/* 加细 */.one {font-weight: light;}/* 正常 */.two {font-weight: normal;}/* 加粗 */.three {font-weight: bold;}/* 加粗再加粗由于默认字体只有三种粗细所以和加粗字体粗细一致 */.four {font-weight: bolder;}/* 以数值控制还是依赖于字体 */.five {font-weight: 100;}
/style8.1.5字体复合属性
style.top1 {font: bold italic 100px STCaiyun;}
/style8.2 文本属性
8.2.1 文本颜色
使用上面的color属性即可。
8.2.2 文本间距 属性值为px正值让间距变大负值让间距变小。 style/* 调整所有字母之间的间距 */div:nth-child(2) {letter-spacing: 20px;}/* 调整单词之间的距离以空格为准 */div:nth-child(3) {word-spacing: 30px;}
/style8.2.3 文本类型
style/* 设置上划线类型与颜色 */div:nth-child(1) {text-decoration: overline dotted red;}/* 设置下划线类型与颜色 */div:nth-child(2) {text-decoration: line-through wavy blue;}/* 设置下划线 */div:nth-child(3) {text-decoration: underline;}/* 去除下划线 */a,ins,del {text-decoration: none;}
/style8.2.4 文本缩进
text-indent: 距离; 属性值为CSS的长度单位。例如px。
8.2.5 文本对齐
水平对齐
style/* 左对齐 */div:nth-child(1) {text-align: left;}/* 居中对齐 */div:nth-child(2) {text-align: center;}/* 右对齐 */div:nth-child(3) {text-align: right;}
/style垂直对齐 vertical-align用于指定同一行元素之间或表格单元格内文字的垂直对齐方式。不能控制块元素 常用值 baseline默认值使元素的基线与父元素的基线对齐top使元素的顶部与其所在行的顶部对齐middle使元素的中部与父元素的基线加上父元素字母x的一半对齐bottom使元素的底部与其所在行的底部对齐。 style* {font-size: 40px;}/* 只对单行文字生效 *//* 1、顶部对齐默认即为顶部对齐 *//* 2、居中对齐heightline-height *//* div {background-color: aqua;height: 80px;line-height: 80px;} *//* 3、底部对齐line-height(height×2)-font-size -xx的值依据字体族的大小而定 */div {background-color: aqua;height: 60px;line-height: 50px;}
/style8.2.6 文本行高
style/* 默认行高 *//* div {line-height: normal;} *//* 直接写行高像素大小 *//* div {line-height: 60px;} *//* 1.5倍行高 *//* div {line-height: 1.5;} *//* 默认行高的150% */div {line-height: 150%;}
/style注意事项 line-height过小文字会产生重叠最小值为0不能为负数line-height可以继承最好采用倍数写法line-height等于height可以实现文字的垂直居中但并不是绝对的垂直居中。 8.3 各类元素的属性
8.3.1 列表
styleul {/* 去除列表前面的符号 */list-style-type: none;/* 将列表元素放入外部 */list-style-type: outside;/* 自定义列表符号 */list-style-image: url(../imgs/加载环.gif);/* 复合属性 */list-style: decimal inside url(../imgs/加载环.gif);}
/style8.3.2 表格
表格边框 除了表格边框其他元素边框也可如此书写。 如 div { border: 2px aqua solid; } styletable {/* 控制表格边框宽度 *//* border-width: 2px; *//* 控制表格边框颜色 *//* border-color: aqua; *//* 控制表格边框风格 *//* border-style: dashed; *//* 复合写法 */border: 2px aqua solid;}th,td {border: 2px orange solid;}
/style表格特有属性即只有table可以使用
styletable {border: 1px blue solid;/* 自动设置列宽度默认 *//* table-layout: auto; *//* 平均分割表格 */table-layout: fixed;/* 设置单元格之间的间距在不合并的前提下生效 */border-spacing: 10px;/* 合并单元格的边框 */border-collapse: collapse;/* 隐藏没有内容的单元框 */empty-cells: hide;/* 设置表格标题的位置 */caption-side: top;}th,td {border: 1px orange solid;}
/style8.3.3 背景
background功能属性值background-attachment背景图像是否固定或者随着页面的其余部分滚动。scroll默认值。背景图片随着页面的滚动而滚动相对于元素本身固定而不是随着它的内容滚动fixed此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制背景也不会随着元素的内容滚动local背景相对于元素的内容固定。如果一个元素拥有滚动机制背景将会随着元素的内容滚动同时背景图图片随着页面的滚动而滚动。background-color设置元素的背景颜色。设置背景颜色默认背景颜色为transparent。background-image把图像设置为背景。通过url设置背景照片。background-position设置背景图像的起始位置。关键字设置水平left、center、right垂直top、center、bottom若只写一个值则另一方向默认为center通过长度以元素左上角为原点只写一个值y取center、另一个值为xbackground-repeat设置背景图像是否及如何重复。水平left、center、rightrepeat-x只在水平方向重复repeat-y只在垂直方向重复no-repeat不重复。background复合属性。没有顺序要求。
8.3.4 鼠标
属性名功能常见属性值cursor设置鼠标光标的样式。pointer手move移动图标text文字选择器crosshair十字架wait等待图标help帮助。
stylediv {height: 400px;width: 400px;background-color: aqua;cursor: wait;}
/style// 除了使用官方提供的图标还可以自己使用图标设置
cursor: url(./arrow.png), pointer;相关代码地址https://gitee.com/justinc666/web/tree/master/CSS常用属性
