一、（4）CSS文字样式

CSS文字样式

一、CSS3新增选择器（重点）

结构伪类选择器

　　结构伪类选择器可以根据元素在文档树中的某些特性（如相对位置）定位到它们。也就是，通过文档树结构的相互关系来匹配特定的元素，从而减少HTML文档对ID或类名的定义，帮助你保持代码干净和整洁。

选择符	版本	描述
E:first-child	CSS2	匹配父元素的第一个子元素E。E元素必须是某个元素的子元素，最高是body.first-child必须是兄弟中的第一个
E:last-child	CSS3	匹配父元素的最后一个子元素E。first-child必须是兄弟中的第一个
E:only-child	CSS3	匹配父元素仅有的一个子元素E
E:nth-child(n)	CSS3	匹配父元素的第n个子元素E
E:nth-last-child(n)	CSS3	匹配父元素的倒数第n个子元素E
E:first-of-type	CSS3	匹配同类型中的第一个同级兄弟元素E
E:last-of-type	CSS3	匹配同类型中的最后一个同级兄弟元素E
E:only-of-type	CSS3	匹配同类型中的唯一的一个同级兄弟元素E
E:nth-of-type(n)	CSS3	匹配同类型中的第n个同级兄弟元素E
E:nth-last-of-type(n)	CSS3	匹配同类型中的倒数第n个同级兄弟元素E
E:empty	CSS3	匹配没有任何子元素（包括text节点）的元素E

否定伪类选择器

选择符	版本	描述
E:not(s)	CSS3	匹配不含有s选择符的元素E

.demo li:not(:last-child) {
border-bottom: 1px solid #ddd;
}

伪类：E:after和E:before

E:after 选择器在被选元素的内容后面插入内容。
E:before 选择器在被选元素的内容前面插入内容。
通常使用 content 属性配合，来指定要插入的内容。

示例：

<style type="text/css">
p:before
{
font-size: 18px;
color: red;
font-weight: bold;
content: "以下是歌词：";
}
p:after
{
font-weight: bold;
content: '----歌词结束了。';
}
</style>

伪元素

　　CSS3中常见伪元素有“::first-letter”、“::first-line”、“::before”和“::after”，另外伪元素还增加了一个“::selection”。

　　老版本使用一个“：”显示，在新版本中双冒号与单冒号在CSS3中主要用来区分伪类和伪元素。

注意：所有伪类都以“:”开头，所有伪元素以“::”开头

1. ::before和::after（重点中的重点）

　　“::before”和“::after”不是指存在于标记中的内容，而是可以插入额外内容的位置。尽管生成的内容不会成为DOM的一部分，但它同样可以设置样式。

注意：:before和:after,::before和::after 之间有区别，只是在不同的CSS版本中写法不同而已，使用方法都需要和content配合使用。

2. ::first-letter

　　作用：用来选择文本块的第一个字母。

3. ::first-line

　　作用：用来匹配元素的第一行文本。

4. ::placeholder

　　作用：用于控制表单输入框提示符的外观

兼容语法：

input::-webkit-input-placeholder // chrome
input:-ms-input-placeholder // IE10+
input:-moz-placeholder // Firefox4-18
input::-moz-placeholder // Firefox19+

5. ::selection

　　作用：用来匹配鼠标选中的文本。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*否定伪类选择器*/
        ul{
            border: 1px solid #333333;
            width: 300px;
        }
        ul>li:not(:last-child){
            border-bottom: 1px solid #ff0000;
        }
        /*伪元素*/
        /*在什么之前加指定内容*/
        h1::before{
            content:"大学：";
            color: blue;
        }
        /*在什么之后加指定内容*/
        h1::after{
            content:"......";
            color: red;
        }

        /*其他伪元素*/
        /*首字符下沉*/
        p::first-letter{color: magenta;font-size: 30px;}
        /*控制第一行*/
        p::first-line{color: blue;}
        /*控制表单输入框提示符的外观*/
        input::placeholder{color:red;}
        /*匹配鼠标选中的文本*/
        p::selection{color: blueviolet;background: aqua;}
    </style>
</head>
<body>
<!--否定伪类选择器-->
<ul>
    <li>计算机与软件工程学院物联网工程</li>
    <li>计算机与软件工程学院物联网工程</li>
    <li>计算机与软件工程学院物联网工程</li>
    <li>计算机与软件工程学院物联网工程</li>
    <li>计算机与软件工程学院物联网工程</li>
    <li>计算机与软件工程学院物联网工程</li>
    <li>计算机与软件工程学院物联网工程</li>
</ul>
<!--伪元素-->
<h1>西华大学</h1>

<!--其他伪元素-->
    <hr/>
    <p>西华大学研究院西华大学研究院西华大学研究院</p>
    <p>西华大学研究院</p>
    <p>西华大学研究院</p>
    <p>账号：<input type="text" name="username" placeholder="请输入用户名"/></p>
</body>
</html>

字体属性 Font（重点）

font-family 字体名称

　　作用： 设置或检索用于对象中文本的字体名称序列。

　　语法： font-family : name

示例：

p{ font-family: 微软雅黑; }
p{ font-family: "arial block"; }
p{ font-family: Courier, "arial block"; }
p{ font-family: Courier, "arial block", 微软雅黑; }

注意：

1）字体名称可以是英文也可以是中文。
2）英文字体如果出来多个单词需要用双引号包括。
3）可以写多个字体，浏览器根据用户电脑上的字体从左到右选择。多个字体用逗号（半角逗号）分隔。

font-size 字体大小

作用： 设置或检索对象中的字体尺寸。

语法： font-size : absolute-size| relative-size| length

参数：

absolute-size : 绝对值字体。如： 50px
relative-size : 相对于父对象中字体尺寸进行调节。如：1em
length : 百分数 | 由浮点数字和标识符组成的长度值，不可为负值。其百分比取值是基于父对象中字体的尺寸。

示例：

div{ font-size: 12px; }
div{ font-size: 1.5 em; }
div{ font-size: 1rem; }
div{ font-size: small; }
div{ font-size: 80%; } /* 相对于父对象中字体的百分比，字体不能自适应 */
div{ font-size: smaller; }

补充：在CSS中关于尺寸大小的单位

写法	含义	示例
em	相对于父对象内文本的字体尺寸	font-size: 1.5em;
px	像素（Pixel），相对于显示器屏幕分辨率而言。	font-size:12px;
rem	相对于根标签内文本的字体尺寸	font-size:1rem;

注：

在PC上通常用 px ，中文字大小通常为 12px 14px 16px 18px
在手机中通常用 rem ，中文字大小通常为 0.75rem 0.8rem 1rem 1.2rem

font-weight 字体粗细

作用： 设置或检索对象中的文本字体的粗细。

语法： font-weight :normal| bold| bolder| lighter| number

参数：

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b标签的作用
bolder : 特粗体
lighter : 细体
number : 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

示例：

p { font-weight:bold; }
h1{ font-weight:normal; }
span{font-weight:800;}

font-style 字体样式

作用： 设置或检索对象中的字体样式。

语法： font-style :normal| italic| oblique

参数：

normal : 正常的字体
italic : 斜体。对于没有斜体变量的特殊字体，将应用oblique
oblique : 倾斜的字体

示例：

p { font-style: italic; }

line-height 行高

作用： 检索或设置对象的行高。

语法： line-height :normal| length

示例：

div {line-height:30px; } /* 行高设置为固定值30px */
div {line-height:1.5; } /* 行高设置为1.5倍 */
div {line-height:150%; }

注：值可以是固定值，也可以是相对值。

Font 字体复合属性

作用： 设置或检索对象中的文本特性。该属性是复合属性。

语法： font :font-style font-weight font-size/line-height font-family

示例：

/*完整写法*/
p { font:italic bold 12px/30px arial,sans-serif,宋体;}
/*常用简写形式*/
p { font: 12px/24px 宋体; }
p { font: bold 12px/24px 宋体; }

注：

复合属性的每一个属性值之间通常用空格隔开，特殊要求除外。
font最精简的形式也必须是font: 12px/24px 宋体; 否则不会生效。

color字体颜色

作用： 检索或设置对象的文本颜色。无默认值。

语法： color :color

示例：

div {color: red; }

CSS中颜色的三种表现方式：

1）英文名称：红色：red 绿色：green 蓝色：blue 黄色：yellow ...
2）16进制颜色值（#RRGGBB）：红色：#ff0000 绿色：#00ff00 蓝色：#0000ff 黄色：#ffff00 ...
3）rgb或 rgba：红色： Rgb(255,0,0) 绿色：Rgb(0,255,0) 蓝色：Rgb(0,0,255) 黄色：Rgb(255,255,0)
Rgba(255,0,0,1) 最后一位是alpha透明通道。

text-transform 英文大小写

作用： 这个属性会改变元素中的字母大小写，而不论源文档中文本的大小写。

语法： text-transform:none| capitalize| uppercase| lowercase

参数：

none 默认。定义带有小写字母和大写字母的标准的文本。
capitalize 文本中的每个单词以大写字母开头。
uppercase 定义仅有大写字母。
lowercase 定义无大写字母，仅有小写字母。

示例：

p { text-transform : uppercase; }
p { text-transform :capitalize; }

text-decoration 修饰线

作用： 检索或设置对象中的文本的装饰。

语法： text-decoration :none| underline| blink| overline| line-through

参数：

none : 　无划线
underline : 　下划线
blink : 　闪烁
line-through : 　贯穿线（删除线）
overline : 　上划线

示例：

div { text-decoration : underline; }
div { text-decoration : line-through; }

注：

1）通常用于清除A标签的默认下划线
2）除A标签以外，一般不给其它标签加下划线效果，以免让用户产生误解

三、文本属性Text（重点）

letter-spacing 字间距

作用： 检索或设置对象中的文字之间的间隔。

语法： letter-spacing :normal|length

示例：

<html>
<head>
…..
<style type="text/css">
div { letter-spacing:6px; }
</style>
</head>
……
</html>

word-spacing 词间距（英文）

作用： 检索或设置对象中的单词之间插入的空格数。

语法： word-spacing :normal| length

示例：

div { word-spacing : 20px; }

注：对英文有用，中文词没有效果。

text-align 水平对齐

作用： 设置或检索对象中文本的水平对齐方式。

语法： text-align :left| right| center| justify

参数：

left：　左对齐
right：右对齐
center：居中
Justify：两端对齐

示例：

p { text-align : center; }

vertical-align 垂直对齐

作用：设置或检索对象内容的垂直对齐方式。

参数：

top : 将支持valign特性的对象的内容与对象顶端对齐
middle : 将支持valign特性的对象的内容与对象中部对齐
bottom : 将支持valign特性的对象的文本与对象底端对齐
baseline : 将支持valign特性的对象的内容与基线对齐
sub : 垂直对齐文本的下标
super : 垂直对齐文本的上标
text-top : 将支持valign特性的对象的文本与对象顶端对齐
text-bottom : 将支持valign特性的对象的文本与对象顶端对齐
length : CSS2由浮点数字和单位标识符组成的长度值 | 或者百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。

示例：

/* 通常用于表格的单元格垂直对齐 段落里的垂直对齐一般使用行高*/
td { vertical-align : middle; }

text-indent 文本缩进

作用： 检索或设置对象中的文本的缩进。

语法： text-indent :length

示例：

/* 常用于中文段落的首行缩进2个字*/
p { text-indent :2em; }

white-space 是否自动换行

作用： 设置或检索对象内空格的处理方式。

语法： white-space :normal| pre| nowrap

参数：

normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。
nowrap : 强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。

示例：

p { white-space: nowrap; }

text-overflow 文本溢出标识

作用：超出盒子宽度后的处理方式

语法：text-overflow : clip | ellipsis

参数：

clip : 不显示省略标记（...），而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记（...）

说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。

示例：

.NewsTtile{
width: 150px;
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
<div class="NewsTtile">
1这是新闻标题<br>
2这是新闻标题这是新闻标题这是新标题<br>
3这是新闻标题这是新闻标题这是新闻标题是新题<br>
4这是新闻标题这是新闻标题这是标题<br>
5这是新闻标题这是新闻标题这是新闻标题是新标题<br>
6这是新闻标题这是新闻标题这是题<br>
7这是新闻标题这是新闻标题这是新闻标题闻标题<br>
</div>

注：text-overflow通常与 white-space:nowrap; overflow:hidden; 配合使用。

四、文本效果（重点）

文本阴影

text-shadow属性：文本添加阴影效果；

语法：

text-shadow：none | <shadow> [ , <shadow> ]*
<shadow> = <length>{2,3} && <color>?

默认值：none

取值：

none：无阴影
<length>①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>：设置对象的阴影的颜色。

例：

<h1 style=”text-shadow: 1px 2px yellow; ”>马上要找工作</h1>
<h1 style=”text-shadow: 1px 2px 5px red; ”>马上要找工作</h1>

文本换行

word-wrap：文本自动换行

语法：
word-wrap：normal | break-word

默认值：normal
取值：
normal：允许内容顶开或溢出指定的容器边界。
break-word：内容将在边界内换行。如果需要，单词内部允许断行。

例：

<div id="info" style="width: 200px;border:1px solid red;word-break:break-word;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

五、面试题

1. 伪类和伪元素的区别

2. line-height的理解

posted @ 2020-12-12 23:01 全村的希望、阅读(276) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

不负青春，不负代码

一、（4）CSS文字样式

一、CSS3新增选择器（重点）

结构伪类选择器

否定伪类选择器

伪类：E:after和E:before

伪元素

1. ::before和::after（重点中的重点）

2. ::first-letter

3. ::first-line

4. ::placeholder

5. ::selection

字体属性 Font（重点）

font-family 字体名称

font-size 字体大小

font-weight 字体粗细

font-style 字体样式

line-height 行高

Font 字体复合属性

color字体颜色

text-transform 英文大小写

text-decoration 修饰线

三、文本属性Text（重点）

letter-spacing 字间距

word-spacing 词间距（英文）

text-align 水平对齐

vertical-align 垂直对齐

text-indent 文本缩进

white-space 是否自动换行

text-overflow 文本溢出标识

四、文本效果（重点）

文本阴影

文本换行

五、面试题

公告