css基础-css选择器和css文本样式相关

css基础-css选择器和css文本样式相关:

使用link链入外部样式,页面加载时会同时加载样式

@import url(“*.css”);使用导入式,页面加载完后,才会加载样式


 

链接伪类的顺序

:link-> :visited ->:hover-> :active

或者

: visited -> : link ->:hover-> :active


 

选择器的优先级:

id选择器>class选择器>标签选择器

css基础-css选择器和css文本样式相关_第1张图片

 

 

 

如果设置了同样的类样式,类样式与元素里类的顺序没有关系,取决于哪个样式离需要引用样式的元素最近就用哪个,所以div里的文字颜色是“橘色“


 

选择器权值:

标签选择器:1

类和伪类选择器:10

id选择器:100

通配符选择器:0

行内样式:1000

!important:优先级最最高

权值不同时,根据权值判断样式;权值相同时,根据就近原则判断样式


 

常用选择器:

input:focus

p:first-letter   p元素的首字母

p:first-line  p元素的首行


 

serif字体和sans-serif字体的区别:

sans-serif有修饰

sans-serif无修饰


 

font-style:normal/italic/oblique

正常 斜体 倾斜


 

font简写顺序: font-style font-variant  font-weight  font-size  font-family;


 

img水平居中:

img不是块级元素,不能使用img{text-align:center;}

可以在img外面包裹div,使用div{text-align:center;}

margin:0 auto也可以实现


 

vertical-align可以设置数值

单行文字水平垂直居中:

height与Line-height相同,text-align:center;

多行文字水平垂直居中:

多行文字设置margin:0 auto;

文字外容器设置:display:table-cell;vertical-align:middle;

文字外容器的外容器设置:display:table;



   
   
   vertical-align
      

CSS vertical-align 属性

vertical-align 属性设置元素的垂直对齐方式

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中,这个属性会设置单元格框中的单元格内容的对齐方式。

 css基础-css选择器和css文本样式相关_第2张图片

文本大小写:

text-transform:capitalize/uppercase/lowercase/none

文本装饰线:

text-decoration: underline/overline/line-through

文本样式应用demo:



   
   
   vertical-align
      
cyy你会越来越棒棒


文本样式demo2:



   
   
   vertical-align
      

大话西游之大圣娶亲的影评

热门/最新/好友

罗红霉素★★★★★2019-07-26

有人跟我比赛背台词么

阅读:1615 有用


十七只猫和鱼★★★★2019-04-26

任何时候任何场合都可以再看一遍的电影

阅读:515 有用


暖家男★★★★2019-04-22

一定有一些电影,永远都不能被超越

阅读:490 有用


css基础-css选择器和css文本样式相关_第3张图片


你可能感兴趣的:(css基础-css选择器和css文本样式相关)