码迷,mamicode.com
首页 > Web开发 > 详细

web前端入门到实战:常见CSS3选择器和文本字体样式汇总

时间:2020-04-18 09:16:29      阅读:69      评论:0      收藏:0      [点我收藏+]

标签:hover   method   rate   常用   n个元素   selection   前端入门   width   man   

常见的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选择器的四大分类以之前博文为主导,有不同地方欢迎留言评论,下面是一些有意思的的样式,就写出来展示了下).

专门建立的学习Q-q-u-n: 784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程,学习工具,全栈开发学习路线以及规划)

 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> 

web前端入门到实战:常见CSS3选择器和文本字体样式汇总

标签:hover   method   rate   常用   n个元素   selection   前端入门   width   man   

原文地址:https://blog.51cto.com/14592820/2488266

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!