css文本属性文字属性及更多选择器

2022-06-15  本文已影响0人  白富美也在学代码


字体属性:字体系列font-family,大小font-size,粗细font-weight,样式font-style

font:(style,weight,size/line-height,family)

文本属性:文本颜色color,水平对齐 test-align,文本装饰text-decoration,文本缩进text-indent,行间距line-height

 1.text-decoration   :用于设置文字的装饰线

英[ˌdekəˈreɪʃn]美[ˌdekəˈreɪʃn] n.装饰

none   :无任何装饰线,可以去掉a的下划线

overline  :上划线

line-through  :中划线(删除线)

underline  :下划线


2.text-transform  :用于设置文字的大小写转换

transform英[trænsˈfɔːm]美[trænsˈfɔːrm] 使改变; 使改观; 使转换;【数】变换式;【化】反式

captalize   :首字符大写capitalize英[ˈkæpɪtəlaɪz]美[ˈkæpɪtəlaɪz] 把…首字母大写

uppercase  :所有单词字符大写

lowercase  :所有单词字符小写

none  :不受影响


3.text-align  元素内容在元素中的水平对齐方式

align英[əˈlaɪn]美[əˈlaɪn] v.排列; 校准; 排整齐; (尤指)使成一条直线; 使一致;

left  左对齐

right 右对齐

center 居中

justify  两侧对齐


4.text-indent  文本首行缩进

/* text-indent  文本第一行内容进行缩进 -->em=1*15px=15px  缩进两个字就是2em,取决于当前元素的字体大小*/

.p-indent{    font-size: 15px;    text-indent: 3em;}


5.letter-spacing    word-spacing   字母空间  单词空间

.p-lettr{    letter-spacing: 3px;}

.p-world{    word-spacing: 20px;}


6.font-size  设置字体大小

px

em

用em来设置字体大小

为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

实例

h1 {font-size:2.5em;} /* 40px/16=2.5em */

h2 {font-size:1.875em;} /* 30px/16=1.875em */

p {font-size:0.875em;} /* 14px/16=0.875em */

百分比


7.font-family   设置网页字体

.f-family{    font-size: 20px;    font-family:Arial, Helvetica, sans-serif;}

<p class="f-family">我是font-family元素测试文字</p>


8.font-weight   设置字体粗细度

重量值:100,200,300,400,500,600,700,800,900

normal:400   (normal 英 [ˈnɔːml]  adj.正常的;通常的;平常的)

bold:700  (bold 英 [bəʊld] 粗体的黑体的)


font-varient


line-height   行高(文字高度+行间距)

height=line-height

更多选择器

1.属性选择器

2.元素选择器

3.id选择器

4.后代选择器

5.子代选择器

6.并集选择器

7.交集选择器

上一篇 下一篇

猜你喜欢

热点阅读