css———文字与文本相关样式、伪类以及盒子模型

目录

字体相关样式

文本相关样式

另外几种选择器（另外几种选择器见上一节）CSS选择器、样式、link与@import两种引入方式的区别以及href与src的区别_m0_67316947的博客-CSDN博客

伪类

盒子模型

---

字体相关样式

text-family 设置字体系列

text-family："微软雅黑"

font-size 设置字体大小尺寸

font-size ：16px;

font-style 设置字体的风格

font-style: italic 倾斜的  oblique 倾斜的

font-weight 设置字体的粗细

bold 粗体

bolder 加粗

line-height 设置行高 单位为px,若无单位，表示倍数

文本相关样式

text-align        文本水平对齐方式

left        默认 左对齐

center        居中对齐

right        右对齐

justify        两端对齐

text-align        文本首行缩进  常用单位 em

text-decoration 文本修饰

underline        下划线

none        默认 无修饰

line-through        中划线 删除线

overline        上划线

text-transform        英文字母大小写转换

uppercase        全大写

lowercase        全小写

capitalize        首字母大写

letter-spacing        字符间的距离  字母与字母或汉字与汉字之间的距离

word-spacing        单词与单词之间的距离

单行省略标记

white-space:nowrap        不换行

overflow:hidden                内容溢出隐藏

text-overflow:ellipsis        文本溢出显示省略标记

另外几种选择器（另外几种选择器见上一节）

CSS选择器、样式、link与@import两种引入方式的区别以及href与src的区别_m0_67316947的博客-CSDN博客

通配符选择器
*{
    样式属性名 属性值;
}
选择所有的标签

分组选择器
选择器E 选择器F{
    样式属性名:属性值；
}

伪类

设置超链接，鼠标放上去或点击的样式

未访问状态

 a:link{
                color:#00FFFF;
            }

访问后的状态

a:visited{
                color:#FF0000;
            }

鼠标悬停状态

a:hover{
                color:#000000
                ;
            }

激活状态

a:active{
                color:blue;
            }   

盒子模型

标准盒模型  w3c标准
盒子大小 = width + padding + border
 width,height 内容大小
        
怪异盒模型  IE盒子
盒子大小 = width
width,height 盒子大小

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像