css3-2 CSS3选择器和文本字体样式

一、总结

一句话总结：是要记下来的，记下来可以省很多事。

1、css的基本选择器中的:first-letter和:first-line是什么意思？

:first-letter选择第一个单词，:first-line选择第一行

2、css的伪类选择器有哪三种，分别是什么意思？

伪类选择器:
:hover
:focus
::selection 所选的东西，比如文字

3、css字体设置4剑客是哪四个？

1.font-family 字体类型
2.font-size 字体大小
3.font-style 字体样式
4.font-weight 字体粗细

4、css中文本块设置，必加的两个属性是什么？

overflow设置超出部分滚动条，wordbreak设置横向wordbreak

15             overflow:auto;

16             word-break:break-all;

5、css的伪类选择器中的p::selection是什么意思？

所选文字

11         p::selection{

12             background: #f00;

13         }

二、CSS3选择器和文本字体样式

1、相关知识

css选择器:
• 常用选择器
• 基本选择器
• 层级选择器
• 伪类选择器
• 属性选择器

常用选择器:
1.标签
2.id
3.类
4.关联
5.组合

基本选择器:
• :first-child
• :first-letter
• :first-line
• :last-child
• :nth-child(2)

层级选择器:
• a b
• a>b
• a+b

伪类选择器:
:hover
:focus
::selection

属性选择器:
• [id]
• [id=use1]
• [name*=us]
• [name^=en]
• [name$=en]

常见的样式属性和值:
1.字体与颜色
2.背景属性
3.文本属性
4.边框属性
5.鼠标光标属性
6.列表样式
7.定位属性
8.内外边距
9.浮动和清除浮动
10.滚动条
11.显示和隐藏

字体:
1.font-family 字体类型
2.font-size 字体大小
3.font-style 字体样式
4.font-weight 字体粗细

文本:
1.letter-spacing   字间距
2.word-spacing     词间距
3.text-decoration 下划线
4.text-align       对齐
5.text-indent      缩进
6.line-height      行高
7.color            颜色
8.word-break       折行

2、代码

word-break文字折行

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family:微软雅黑;

         }

         div{

             width:500px;

             height:100px;

             border:2px solid #f00;

15             overflow:auto;

             word-break:break-all;

         }

     </style>

 </head>

 <body>

     <div>

         <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

     </div>

 </body>

 </html>

selection伪类选择器

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

         }

11         p::selection{

             background: #f00;

         }

     </style>

 </head>

 <body>

     <h2>linux技术</h2>

     <p>linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!linux is very much!</p> </body>

 </html>