CSS学习笔记（续）-常见样式属性
超爱慢
已于 2023-05-17 16:00:55 修改
阅读量85
收藏
点赞数
已于 2023-05-17 16:00:55 修改
阅读量85
收藏
点赞数
于 2023-05-17 15:30:19 首次发布
本文介绍了HTML中用于文本编辑的span标签，以及CSS的字体样式属性，如font-family,font-size,font-style,font-weight，还涵盖了color属性的各种颜色表示方法，文本对齐、首行缩进、行高和文本修饰。此外，提到了超链接伪类和列表样式的概念。
目录
1.1 span标签
1.2 字体样式
1.2.1 font-family属性
1.2.2 font-size属性
1.2.3 font-style属性
1.2.4 font-weight属性
1.2.5 font属性
1.3 文本样式
1.3.1 color属性
1.3.2 水平对齐方式
1.3.3 首行缩进
1.3.4 行高
1.3.5 文本修饰
1.3.6 垂直对齐方式
1.3.7 文本阴影
2.超链接伪类
3.列表样式
4.背景样式
4.1 背景颜色
4.2 背景图片
4.3 背景重复方式
4.4 背景定位
1.编辑网页文本
1.1 span标签
能让某几个文字或者某个词语凸显出来
行内元素，可在一段话内使用，使一段话内某些字眼突出，怎么样突出由自己设置css样式
<body>
<p><span style="color: burlywood;">徐凤年</span>
摆手道：“反正黄蛮儿也不在意这个，我看他在这里就挺开心，
不比在<span style="color: lawngreen;">北凉王府</span>差了。是吧，黄蛮儿？”</p>
</body>
1.2 字体样式
1.2.1 font-family属性
字体类型font-family
注：如果浏览器不支持第一个字体，则会尝试下一个
body{font-family: "Times New Roman", "楷体";}
1.2.2 font-size属性
字体大小 font-size
| 把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。 默认值：medium。 |
| smaller | 把 font-size 设置为比父元素更小的尺寸。 |
| larger | 把 font-size 设置为比父元素更大的尺寸。 |
| length | 把 font-size 设置为一个固定的值。 |
| % | 把 font-size 设置为基于父元素的一个百分比值。 |
| inherit | 规定应该从父元素继承字体尺寸。 |
1.2.3 font-style属性
字体风格 font-style
| normal | 默认值。浏览器显示一个标准的字体样式。 |
| italic | 浏览器会显示一个斜体的字体样式。 |
| oblique | 浏览器会显示一个倾斜的字体样式。 |
| inherit | 规定应该从父元素继承字体样式。 |
1.2.4 font-weight属性
字体粗细 font-weight
| normal | 默认值，定义标准的字体 |
| bold | 粗体字体 |
| bolder | 更粗的字体 |
| lighter | 更细的字体 |
| 100、200、300、400、500、600、700、800、900 | 定义由细到粗的字体 400等同于normal，700等同于bold |
1.2.5 font属性
字体属性的顺序：字体风格→字体粗细→字体大小→字体类型
例子：
span{font:italic bold 12px "楷体";}
1.3 文本样式
1.3.1 color属性
A）RGB
rgb(r,g,b) : 正整数的取值为0～255
B）RGBA
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0～1
| 颜色的名称 | 颜色的名称，比如red, blue, brown, lightseagreen等，不区分大小写。 | color:red; /* 红色 */ color:black; /* 黑色 */ color:gray; /* 灰色 */ color:white; /* 白色 */ color:purple; /* 紫色 */ |
| 十六进制 | 十六进制符号 #RRGGBB 和 #RGB（比如 #ff0000）。"#" 后跟 6 位或者 3 位十六进制字符（0-9, A-F）。 | #f03 #F03 #ff0033 #FF0033 rgb(255,0,51) rgb(255, 0, 51) |
| RGB，红-绿-蓝（red-green-blue (RGB)） | 规定颜色值为 rgb 代码的颜色，函数格式为 rgb(R,G,B)，取值可以是 0-255 的整数或百分比。 | rgb(255,0,51) rgb(255, 0, 51) rgb(100%,0%,20%) rgb(100%, 0%, 20%) |
| RGBA，红-绿-蓝-阿尔法（RGBa） | RGBa 扩展了 RGB 颜色模式，它包含了阿尔法通道，允许设定一个颜色的透明度。a 表示透明度：0=透明；1=不透明。 | rgba(255,0,0,0.1) /* 10% 不透明 */ rgba(255,0,0,0.4) /* 40% 不透明 */ rgba(255,0,0,0.7) /* 70% 不透明 */ rgba(255,0,0, 1) /* 不透明，即红色 */ |
| HSL，色相-饱和度-明度（Hue-saturation-lightness） | 色相（Hue）表示色环（即代表彩虹的一个圆环）的一个角度。 饱和度和明度由百分数来表示。 100% 是满饱和度，而 0% 是一种灰度。 100% 明度是白色， 0% 明度是黑色，而 50% 明度是"一般的"。 | hsl(120,100%,25%) /* 深绿色 */ hsl(120,100%,50%) /* 绿色 */ hsl(120,100%,75%) /* 浅绿色 */ |
| HSLA，色相-饱和度-明度-阿尔法（HSLa） | HSLa 扩展自 HSL 颜色模式，包含了阿尔法通道，可以规定一个颜色的透明度。 a 表示透明度：0=透明；1=不透明。 | hsla(240,100%,50%,0.05) /* 5% 不透明 */ hsla(240,100%,50%, 0.4) /* 40% 不透明 */ hsla(240,100%,50%, 0.7) /* 70% 不透明 */ hsla(240,100%,50%, 1) /* 完全不透明 */ |
1.3.2 水平对齐方式
text-align：center或right或left
1.3.3 首行缩进
text-indent
1.3.4 行高
line herigh
1.3.5 文本修饰
text-decortion
text-decortion属性规定添加到文本的修饰
上划线 overline
删除线line-through
下划线 underline
1.3.6 垂直对齐方式
vertical-align
1.3.7 文本阴影
text-shadow
| h-shadow | 必需。水平阴影的位置。允许负值。 |
| v-shadow | 必需。垂直阴影的位置。允许负值。 |
| blur | 可选。模糊的距离。 |
| color | 可选。阴影的颜色。参阅 CSS 颜色值。 |
2.超链接伪类
伪类样式：标签名:伪类名{声明;}
例如 ：
a:hover {
color:#B46210;
text-decoration:underline;
}
效果为当鼠标置于<a>标签上会使该标签颜色变为#B46210，以及添加下划线
| :checked | input:checked | 选择所有选中的表单元素 |
| :disabled | input:disabled | 选择所有禁用的表单元素 |
| :empty | p:empty | 选择所有没有子元素的p元素 |
| :enabled | input:enabled | 选择所有启用的表单元素 |
| :first-of-type | p:first-of-type | 选择的每个 p 元素是其父元素的第一个 p 元素 |
| :in-range | input:in-range | 选择元素指定范围内的值 |
| :invalid | input:invalid | 选择所有无效的元素 |
| :last-child | p:last-child | 选择所有p元素的最后一个子元素 |
| :last-of-type | p:last-of-type | 选择每个p元素是其母元素的最后一个p元素 |
| :not(selector) | :not(p) | 选择所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 选择所有 p 元素的父元素的第二个子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 选择所有p元素倒数的第二个子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 选择所有p元素倒数的第二个为p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 选择所有p元素第二个为p的子元素 |
| :only-of-type | p:only-of-type | 选择所有仅有一个子元素为p的元素 |
| :only-child | p:only-child | 选择所有仅有一个子元素的p元素 |
| :optional | input:optional | 选择没有"required"的元素属性 |
| :out-of-range | input:out-of-range | 选择指定范围以外的值的元素属性 |
| :read-only | input:read-only | 选择只读属性的元素属性 |
| :read-write | input:read-write | 选择没有只读属性的元素属性 |
| :required | input:required | 选择有"required"属性指定的元素属性 |
| :root | root | 选择文档的根元素 |
| :target | #news:target | 选择当前活动#news元素(点击URL包含锚的名字) |
| :valid | input:valid | 选择所有有效值的属性 |
| :link | a:link | 选择所有未访问链接 |
| :visited | a:visited | 选择所有访问过的链接 |
| :active | a:active | 选择正在活动链接 |
| :hover | a:hover | 把鼠标放在链接上的状态 |
| :focus | input:focus | 选择元素输入后具有焦点 |
| :first-letter | p:first-letter | 选择每个<p> 元素的第一个字母 |
| :first-line | p:first-line | 选择每个<p> 元素的第一行 |
| :first-child | p:first-child | 选择器匹配属于任意元素的第一个子元素的 <p> 元素 |
| :before | p:before | 在每个<p>元素之前插入内容 |
| :after | p:after | 在每个<p>元素之后插入内容 |
| :lang(language) | p:lang(it) | 为<p>元素的lang属性选择一个开始值 |
不必记住所有的用法，用时来找即可
3.列表样式
list-style
| list-style-type | 设置列表项标记的类型。参阅： list-style-type 中可能的值。 |
| list-style-position | 设置在何处放置列表项标记。参阅： list-style-position 中可能的值。 |
| list-style-image | 使用图像来替换列表项的标记。参阅： list-style-image 中可能的值。 |
| initial | 将这个属性设置为默认值。参阅： initial 中可能的值。 |
| inherit | 规定应该从父元素继承 list-style 属性的值。参阅： inherit 中可能的值。 |
4.背景样式
4.1 背景颜色
background-color
4.2 背景图片
background-image:url(图片路径);
4.3 背景重复方式
background-repeat属性
| repeat： | 沿水平和垂直两个方向平铺 |
| no-repeat： | 不平铺，即只显示一次 |
| repeat-x： | 只沿水平方向平铺 |
| repeat-y： | 只沿垂直方向平铺 |
4.4 背景定位
background-position
| left top left center left bottom right top right center right bottom center top center center center bottom | 如果仅指定一个关键字，其他值将会是"center" |
| x% y% | 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
| xpos ypos | 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
| inherit | 指定background-position属性设置应该从父元素继承 |
扫一扫
2167
暂无认证
到【灌水乐园】发言
༺Lisy༻: 安装源 设置基础软件仓库时出错。怎么解决这个问题
A Joker And Loser: 大佬NB
嘉平11: 没有找到zookeeper.out
超爱慢: 完整的源码，需要帮忙报错信息可以放一下
超爱慢: 你这问的太模糊了，可能你命令写错了？