css样式表的基本属性,css基础篇 语法规范 基本选择器 字体属性 文本属性 样式表...

语法规范

样式都写在

样式选择器，属性名，属性值关键字全部使用小写字母，特殊情况除外

属性值前面，冒号后面，保留一个空格

选择器(标签)和大括号中间保留空格

基本选择器

标签选择器

用法

标签名 {样式属性}

例子

h3 {

color: pink;

font-size: 20px;

}

类选择器

用法

.类名 {样式属性}

补充

一个标签可以有不止一个类

例子

.class_selector {

color: red;

}

id选择器

用法

#id {样式属性}

例子

#multiple_class_selector03 {

font-weight: 1000;

}

通配符选择器

用法

*{样式属性}

(*选择所有标签)

例子

* {

font-style: italic;

}

字体属性

字体大小font-size

谷歌浏览器默认字体大小是16px

由于不同浏览器打开的默认字体大小不同，所以建议人为自己设置

可以给body设置整个页面的文字的大小

例子

#div01 {

font-size: 20px;

}

字体粗细font-weight

实际开发时，更推荐用数字来表示粗细

属性值

normal

普通粗细

bold

加粗

数字

400 等同于 normal，而 700 等同于 bold，由细到粗的字体粗细

例子

#div04{

font-weight: normal;

}

#div05{

font-weight: bold;

}

#div06{

font-weight: 100;

}

#div07{

font-weight: 500;

}

#div08{

font-weight: 1000;

}

字体样式font-style

属性值

normal

普通字体样式

italic

斜体字体样式

例子

#div09 {

font-style: normal;

}

#div10 {

font-style: italic;

}

字体的综合写法font:

用法

能有效的减少代码量，简化代码

选择器 {

font:

[font-style]

[font-variant]

[font-weight]

font-size[/line-height]

font-family;

}

例子

#div11 {

font:

italic

300

30px

normal;

}

文本属性

文本颜色color

表示方法分为三种，分别是：

预定义的颜色值 e.g.: blue

十六进制 e.g.: #0000ff(最常用)

RGB代码 e.g.: rgb(0, 0, 255)

例子

#div01 {

color: #0000ff;

}

文本对齐text-align

文本的位置对齐分布

属性值

left

向左靠拢

right

向右靠拢

center

水平居中

例子

#div02 {

text-align: left;

}

#div03 {

text-align: right;

}

#div04 {

text-align: center;

}

修饰文本text-decoration

属性值

none

默认文本，没有修饰

underline

下划线

overline

上划线

line-through

删除线

例子

#div05 {

text-decoration: none;

}

#div06 {

text-decoration:underline;

}

#div07 {

text-decoration:overline;

}

#div08 {

text-decoration:line-through;

}

文本缩进text-indent

文本前的空档

补充

em 是一个相对单位，就是当前元素(font-size) 1 个文字的大小, 如果当前元素没有设置大小，则会按照父元素的 1 个文字大小

例子

#div09 {

text-indent: 20px;

}

#div10 {

text-indent: 2em;

}

行间距(行高line-height)

行高的文本分为三个部分: 上间距 文本高度 下间距

行间距=上间距+下间距

行高=行间距+文本高度

例子

.line_height_div {

line-height: 100px;

}

样式表

行内样式表

直接写在html中的所作用的标签里面的样式

例子

行内样式表

内部样式表

写在html中的

例子

color: blue;

}

内部样式表

外部样式表

写在css中的样式

例子

外部样式表

外部样式表.css

#div02 {

color: blue;

}

本文地址：https://blog.csdn.net/qilie_32/article/details/111088002