系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网页制作 > CSS > 详细页面

常见CSS3选择器和文本字体样式汇总

时间:2020-02-20来源:系统城作者:电脑系统城

常见的CSS3选择器包含:常用基本、属性、伪类、层级(组合)选择器,具体使用情况建议先阅读css选择器四大类:基本、组合、属性、伪类对于选择器的使用有一个基本了解,选择器的作用在于通过它找到元素,并且给它添加属性样式。

常用的选择器有:标签、id、类、关联(通过父集找到子集)组合选择器,注意html页面中id是唯一的;基本选择器有(/*代表注释*/),/*:first-child第一个元素*/,/*:last-child最后一个元素*/,/*:nth-child(n)第几个元素*/,/*::first-line 第一行*/,/*::first-letter 第一个单词/字符*/,然后层级选择器有a b后代,a>b子元素,a+b后面的元素(相邻选择器),其次伪类选择器有:hover,:focus焦点,::selection更改鼠标选择文本背景色,最后属性选择器(属性选择器的目的在于可以直接把标签身上的一种属性拿来用)有基本选择器[属性]、基本选择器[属性=值]、 基本选择器[属性~=值]空格符隔开多个、 基本选择器[属性^=值]以什么开始、 基本选择器[属性$=值]以什么结束。(备注说明:教程是16年的,有些选择器的名称与现在的不是很一致,建议这里的基本选择器还是按照伪类来记,有关css选择器的四大分类以之前博文为主导,有不同地方欢迎留言评论,下面是一些有意思的的样式,就写出来展示了下).

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>CSS3选择器和文本字体样式</title>
 7     <style type="text/css">
 8     div::first-line{
 9         color: #f90;
10     }/*第一行*/
11     div::first-letter{
12         font-style: italic;
13         font-size: 24px;
14     }/*第一个单词/字符*/
15     .box>li:first-child{
16         list-style: square;
17     }/*第一个元素*/
18     .box>li:last-child{
19         list-style: none;
20     }/*最后一个元素*/
21     .box>li:nth-child(3){
22         list-style: lower-roman;
23     }/*第n个元素*/
24     div::selection{
25         background-color: red;
26         color: #FFF;
27     }/*::selection更改鼠标选择文本背景色*/
28     input{
29         outline: none;
30     }/*文本聚焦,更换默认边框颜色*/
31     </style>
32 </head>
33 <body>
34     <ul class="box">
35         <li>1</li>
36         <li>2</li>
37         <li>3</li>
38         <li>4</li>
39         <li>5</li>
40     </ul>
41     <div>
42         “尽信书不如无书下一句:吾于《武成》,取二三策而已矣。出自《孟子》的《尽心章句下》, “尽信书,则不如无书” 这是精辟透脱的读书法,要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies.It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently. "
43     </div>
44     <form action="" method="get">
45         焦点:<input type="text">
46     </form>
47 </body>
48 </html>
复制代码

css3中"font"字体:/*font-family:字体类型*/,/*font-size:字体大小*/,/*font-style:itailc斜体*/,/*font-weight: 控制字体粗细大小*/,建议阅读css常用样式font控制字体的多种变换内容介绍基本一致。

css3对文本样式的处理常见的样式有letter-spacing:字间距,word-spacing:词间距,text-decoration:下划线,text-align:文本对齐方式,text-indent:首航缩进,line-height:行高,color:文本字体颜色,word-break:break-all文本折行。常说撞了南墙才回头,现在如果文本中恶意输入信息,比方都是这个单字母,怎么办?你会发现它在浏览器中不自动换行,而且出现底部滚动条,这个html文档展示一般从上至下,但是这个页面这样从左至右展示,怎么办?解决办法见div.box2,自行写下,浏览器展示下,印象更深,当然这种情况毕竟是少数,毕竟页面的排版还是换行来的好看,Foreigner也不例外吧!

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>有意思的word-break:break-all文本折行</title>
 7     <style type="text/css">
 8     div.box2{
 9         word-break: break-all;
10         overflow: auto;
11     }/*word-break:break-all文本折行*/
12     </style>
13 </head>
14 <body>
15     <!--默认文本都是换行的-->
16     <div class="box1">
17         “尽信书不如无书下一句:吾于《武成》,取二三策而已矣。出自《孟子》的《尽心章句下》, “尽信书,则不如无书” 这是精辟透脱的读书法,要求读者善于独立思考问题。”"It is better to write a letter without a book than the next sentence: I am in" Wu Cheng "and take two or three strategies. It is from the Mencius" Below the Heart Chapter "," It is better to have a letter than a book. " Readership requires readers to think independently. 
18     </div>
19      <!--但是像这样一些恶意输入文本的,你会发现它在浏览器中不自动换行,而且出现底部滚动条,这个html文档展示一般从上至下,但是这个页面这样从左至右展示,怎么办?解决办法见div.box2-->
20     <div class="box2">
21         aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
22     </div>
23 </body>
24 </html> 
复制代码
分享到:

相关信息

  • 纯CSS实现具有渐变和圆角的彩色边框

    传统的灰色纯色边框你是不是觉得太难看了?你是否想设计一些精美的边框,例如渐变、圆角、彩色的边框?那你来对地方了,本文将介绍如何用纯CSS就能实现具有渐变和圆角的彩色边框...

    2023-03-06

  • css圆角三角形的实现代码

    今天给大家带来一个如何实现圆角三角形的方案,这个方案虽然可以实现,但是也是借助拼凑等方式来实现的,假如想一个div来实现圆角三角形,还是比较困难的。之前文章讲了如何实现对话框,里面介绍了三角形的实现方式。今天讲讲...

    2023-03-06

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载