Loading... ## 为什么需要使用CSS? * 有效的传递页面信息 * 使用CSS美化过的页面文本，使页面漂亮、美观，吸引用户 * 可以很好的突出页面的主题内容，使用户第一眼可以看到页面主要内容 * 具有良好的用户体验 ## `<span>`标签 * 概念: `<span>`标签被用来组合文档中的行内元素，span 没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化。 * `<span>` 标签支持 HTML 中的全局属性 (详情请查阅: [https://www.w3school.com.cn/tags/html_ref_standardattributes.asp](https://www.w3school.com.cn/tags/html_ref_standardattributes.asp)) ## 使用CSS设置字体样式和文本样式 ### 设置字体样式 #### 设置字体类型 * 语法结构 `font-family:"Times New Roman",Georgia,Serif;` * font-family 可以把多个字体名称作为一个“回退”系统来保存。 * 如果浏览器不支持第一个字体，则会尝试下一个。 * e.g. * 腾讯新闻的标准字体集: font-family:Microsoft Yahei,Avenir,Segoe UI,Hiragino Sans GB,STHeiti,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif; * 百度新闻的标准字体集: font-family:arial,"Hiragino Sans GB","Microsoft Yahei","微软雅黑","宋体",Tahoma,Arial,Helvetica,STHeiti; * 通用写法: font-family:arial,"Microsoft Yahei"; #### 设置字体大小 * 语法结构 `font-size: 属性值;` * 属性值的常用取值单位 (不常见的属性值单位:cm、mm、pt、pc) * px - 像素单位 * em - 相对单位(相对于当前对象的父级元素的字体尺寸， 如果当前对象的父级元素的字体尺寸没有被设置过，那则相对于浏览器的默认尺寸，默认是 16px) * rem - 相对单位(CSS3 新增, 总是相对于 “根”元素 HTML 的字体来计算) * **注意:** * 如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。 #### 设置字体风格 * 语法结构 `font-style: 属性值;` * 属性值的取值范围 * normal - 文本正常显示 * italic - 文本斜体显示 * oblique - 文本倾斜显示 * inherit - 从父元素继承字体样式 * **注意:** * 斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。 * 通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。 #### 设置字体的粗细 * 语法 `font-weight: 属性值;` * 属性值的取值范围 * normal - 定义标准的字符(默认值)。 * bold - 定义粗体字符。 * bolder - 定义更粗的字符。 * lighter - 定义更细的字符。 * 100、200、300、400、500、600、700、800、900 - 定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。 * inherit - 从父元素继承字体的粗细。 #### 在一个声明中设置所有字体属性 * 语法结构 * 语法1 `font:italic bold 14px arial,sans-serif;` 该语法依次设置的是: font-style font-weight font-size font-family; * 语法2 `font:italic bold 12px/20px arial,sans-serif; [推荐/常用]` 该语法一次设置的是: font-style font-weight font-size/line-height font-family; * 注意: * font 简写属性在一个声明中设置所有字体属性。在语法2的结构中,还可以设定当前元素的行高。 ### 设置文本样式 #### 设置文本颜色 * 语法结构 `color : 属性值;` * 属性值的取值范围 * rgb(0,0,255); - 分别代表红,绿,蓝,红绿蓝的取值范围是0~255之间(不支持小数) * rgba(0,255,0,0.5); - 分别代表红,绿,蓝,透明度(alpha透明度),红绿蓝的取值范围是0 ~ 255之间(不支持小数),透明度的取值范围是0~1之间(支持小数) * **#FF00CC**; - 16进制的颜色值,英文的取值范围是A ~ F,数字的取值范围是0 ~ 9; **#FF00CC**; 也可以简写为 **#F0C**; * red; - 直接使用颜色名称 [不推荐] #### 设置元素水平对齐方式 * 语法结构 `text-align: 属性值;` * 属性值的取值范围 * left - 把文本排列到左边。默认值：由浏览器决定。 * right - 把文本排列到右边。 * center - 把文本排列到中间。 * justify - 实现两端对齐文本效果。 * inherit - 规定应该从父元素继承 text-align 属性的值。 #### 设置元素的垂直对齐方式 * 语法结构 `vertical-align: 属性值;` * 属性值的取值范围 * baseline - 默认。元素放置在父元素的基线上。 * middle - 把此元素放置在父元素的中部。 [常用] * sub - 垂直对齐文本的下标。 * super - 垂直对齐文本的上标 * top - 把元素的顶端与行中最高元素的顶端对齐 * text-top - 把元素的顶端与父元素字体的顶端对齐 * bottom - 把元素的顶端与行中最低的元素的顶端对齐。 * text-bottom - 把元素的底端与父元素字体的底端对齐。 * % - 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 * inherit - 规定应该从父元素继承 vertical-align 属性的值。 #### 设置首行文本的缩进 * 语法结构 `text-indent: 属性值;` * 属性值的取值范围 * 10px - 像素单位 * 10em - em/rem相对单位 * 10% - 百分比单位 #### 设置文本的行高 * 语法结构 `line-height: 属性值;` * 属性值的取值范围 * normal - 默认。设置合理的行间距。 * 2px; - 像素单位 * 2em/2rem; - 相对单位 * 20% - 百分比单位(基于当前字体尺寸的百分比行间距) * inherit - 从父元素继承 line-height 属性的值。 #### 设置文本的装饰 * 语法结构 `text-decoration:属性值;` * 属性值的取值范围 * none - 默认。定义标准的文本。(`<a>`标签默认的文本装饰属性为: underline) * underline - 定义文本下的一条线。 * overline - 定义文本上的一条线。 * line-through - 定义穿过文本下的一条线。 * blink - 定义闪烁的文本。 [IE、Chrome 、Safari 不支持 "blink" 属性值] * inherit - 父元素继承 text-decoration 属性的值。 #### 文本阴影 * 语法结构 `text-shadow: color h-shadow v-shadow blur;` * 属性值解释 * h-shadow - 必需,水平阴影的位置 [X轴] [单位: px] * v-shadow - 必需,垂直阴影的位置 [Y轴] [单位: px] * blur - 可选,模糊的距离 [单位: px] * color - 可选,阴影的颜色 * 注意: text-shadow 属性向文本添加一个或多个阴影。多个阴影属性之间使用逗号分隔。 ## 使用CSS设置超链接样式 * 语法结构 ```css 选择器:伪类名{ 属性名: 属性值; 属性名: 属性值; .... } ``` * 伪类名 * :link 未单击访问时超链接样式 * :visited 单击访问后超链接样式 * :hover 鼠标悬浮其上的超链接样式 * :active 鼠标单击未释放的超链接样式 * 设置顺序:link -> :visited-> :hover -> :active ## 使用CSS设置列表样式 * 语法结构 `list-style:属性值;` * 属性值的取值范围 * none 无标记符号 * disc 实心圆，默认类型 * circle 空心圆 * square 实心正方形 * decimal 数字 ## 使用CSS设置背景样式 ### 背景颜色 * 语法结构 `background-color : 属性值;` * 属性值可以参考 [设置文本样式>设置文本颜色>属性值的取值范围] ### 背景图片 * 语法结构 `background-image:url(图片路径);` ### 背景图片平铺方式 * 语法结构 `background-repeat: 属性值;` * 属性值的取值范围 * repeat 沿水平和垂直两个方向平铺 * no-repeat 不平铺，即只显示一次 * repeat-x 只沿水平方向平铺 * repeat-y 只沿垂直方向平铺 ### 背景图片位置 * 语法结构 `background-position : 属性值;` * 属性值的取值范围 * top left、top center、top right、center left、center center、center right、bottom left、bottom center、bottom right 如果您仅规定了一个关键词，那么第二个值将是"center"。默认值：0% 0%。 * x% y% 第一个值是水平位置，第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值，另一个值将是 50%。 * xpos ypos 第一个值是水平位置，第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值，另一个值将是50%。您可以混合使用 % 和 position 值。 ### 背景图片大小 * 语法结构 `background-size : 属性值;` * 属性值的取值范围 * 40% 40% 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto". * cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 * contain 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 * 20px 50px 设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 ### 一个属性设置以上所有样式 ```css background: background-color background-image background-position background-repeat background-size; ``` ## 使用CSS设置渐变效果 ### 渐变效果的分类 * 线性渐变 * 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等 * 径向渐变 * 圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合 ### 语法结构 ```css background -image: linear-gradient ( direction, color1, color2,…) ; /*线性渐变*/ background-image: radial-gradient(circle, red, yellow, green); /*径向渐变*/ ``` 属性解释 * direction : 方向 [常见值: to right 、to left 、to buttom 、to top 、to right buttom 、to right top 、 to left buttom 、to left top] * direction 也可以使用角度: 0deg [deg-度] * circle : 圆形 , 可以省略, 省略后为椭圆 **更多渐变知识点,请查阅:** [https://www.runoob.com/css3/css3-gradients.html](https://www.runoob.com/css3/css3-gradients.html) ## 浏览器兼容型 * IE浏览器是Trident内核，加前缀：-ms- * Chrome浏览器是Webkit内核，加前缀：-webkit- * Safari浏览器是Webkit内核，加前缀：-webkit- * Opera浏览器是Blink内核，加前缀：-o- * Firefox浏览器是Mozilla内核，加前缀：-moz- **想要了解更多信息,请自行查阅:** [https://www.w3school.com.cn/cssref/index.asp](https://www.w3school.com.cn/cssref/index.asp) --- <div class="tip inlineBlock info simple"> ▶️ 开始学习下一章: [HTML从入门到精通 - 盒子模型](https://jbea.cn/archives/519.html) </div> 最后修改：2022 年 08 月 31 日 © 允许规范转载 赞 2 都滑到这里了，不点赞再走！？
