Summary of commonly used styles in CSS and summary of commonly used attributes in CSS-CSS Tutorial-php.cn

This article brings you a summary of commonly used styles in CSS and a summary of commonly used attributes in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

CSS style sheet:

Function: Set how to display HTML tags
Syntax structure:

First type: selector {
Style attribute declaration;
}Note: This style of CSS style sheet consists of two parts: a selector and one or more declarations; this style sheet can only be defined in a style tag or css file, and each style tag or css file can Define multiple style sheets
The second type: style="Style attribute declaration 1;Style attribute declaration 2;..."Explanation: The CSS style sheet in this way only consists of one or more declarations; this style Tables can only be defined in the style tag attribute; each tag in the HTML document has a style tag attribute

No matter which method is used to define the CSS style sheet, the style attribute declaration in the style sheet consists of a style attribute (Non-label attributes, that is, style attributes cannot be used directly in tags as label attributes) and a style attribute value. The style attribute and style attribute value are separated by colons; use semicolons to separate declarations

Note: 1. If a style attribute has multiple style attribute values, the style attribute values are separated by commas
2. In CSS, style attributes and their style attribute values are not case-sensitive, and spaces are not ignored
3. If the attribute value consists of multiple words, it is recommended to use single quotes

selector:

tag selector: tag selector in the HTML document The defined tag name is the selector name, and its syntax is as follows:

标签名{
    样式属性声明1;    ...}

Copy after login

Action objects: All tags in the HTML document with the same tag name and the tag selector name will be affected
Class selector:The class selector uses the attribute value of the class tag attribute in the tag as the selector name. Its syntax is as follows:

.class  标签属性的属性值{
    样式属性声明1;    ...}

Copy after login

Action objects: The attribute value of the class tag attribute is the same as the class selector. The same tags are affected by Impact, note: the class tag attribute cannot start with a number
id selector: The id selector takes the attribute value of the id tag attribute in the tag as the selector name, and its syntax is as follows:

#id 标签属性的属性值{
    样式属性声明1;    ...}

Copy after login

Action objects: Only tags with the same attribute value as the id selector # after the id tag attribute are affected. Note: The attribute value of the id tag attribute cannot start with a number; the attribute value of the id tag attribute must be unique in the HTML document, and the attribute value of the class tag attribute does not need to be unique
Descendant selector:

语法：父代选择器1 子父代选择器2 子父代选择器3...子代选择器{
        样式属性声 明1;        ...
    }

Copy after login

Note: Spaces are used between selectors
Group selector:If the partial styles in multiple CSS style sheets of an HTML document are the same, they can be extracted by defining a group selector To simplify the CSS style code, the selector name of this type of selector consists of multiple selectors, separated by commas, and its syntax is as follows:

选择器1,选择器2,选择器3...{
    样式属性声明;    ...}

Copy after login

Wildcard selector: Wildcard selector It is equivalent to a group selector that lists all tags in an HTML document. Its syntax is as follows:

*{
    样式属性声明1;    ...}

Copy after login

How to use CSS styles

There are three ways to insert CSS styles in HTML: external styles Table, internal style sheet, inline style
External style sheet:When the style rules of certain tags in multiple HTML documents are the same, in order to achieve the reuse of these style sheets, and also to facilitate management Style 1 sheet will write the CSS style in the css style file, and use the link tag to introduce the css file into the HTML document
Supplementary: The link tag is also used to set the small icon at the head of the HTML document, the syntax structure: < ; link rel=”shortcut icon” type=”image/x-icon” href=”image path” />

Internal style sheet: When the style in an HTML document is There is no commonality in other HTML documents, but the styles of multiple tags in this HTML document are the same. In order to reuse these style rules and to facilitate the management of style rules, the CSS style needs to be written directly in the HTML document.

Inline style within the style tag: When a certain tag style in an HTML document is different from other tag styles or the tag style in the document is not consistent with the parent tag style, The CSS style is written in the attribute value of the style tag attribute of a certain tag in the HTML document

CSS style priority

Selector priority: id selector> Class selector>Tag selector, and the selector priority does not consider the order of the selectors

Priority of style insertion method:If you follow the general order of inserting CSS styles (that is, first Use link to insert an external style sheet, then use the style tag to insert an internal style sheet, and finally insert an inline style in the style tag attribute), the priority is inline style > internal style sheet > external style sheet

常用CSS样式属性

边框样式属性
border-width属性：用于为元素的所有边框设置宽度或单独的为各边边框设置宽度
注意：如果不设置border-style属性或将其设置为none或hidden属性值，则border-width属性不会起作用，这时边框宽度实际上会重置为0
border-style属性：用于设置元素所有边框的样式，或者单独为各边设置边框样式，该属性有多个值（none默认值，定义无边框；hidden与none相同；dotted定义点状边框；dashed定义虚线；solid定义实线）
注意：只有当值不为none或hidden时才能出现
border-color属性：用于设置一个元素所有边框的颜色或为四个边框分别设置不同的颜色
注意：把border-style属性声明到border-color属性之前，元素需先获得边框再改变其颜色
边框简写属性：
注意：1.把边框的宽度，样式和颜色设置到一个声明中，需要按照宽度，样式，颜色的顺序进行设置，允许不设置其中某个值
2.使用border设置边框属性时，border-width，border-style，border-color的值只能取一种

border:2px solid greenyellow;border-bottom:2px solid orange;

Copy after login

轮廓线样式属性：轮廓线是在标签边框边缘绘制一条线，该线不会占据空间，也不一定是矩形，主要起到突出标签的作用
outline-color样式属性：设置轮廓线的颜色，使用该样式属性时必须设定outline-style样式属性的属性值不能为none，否则看不到效果
outlin-style样式属性：设置轮廓线的样式，该属性有多个值（none默认值，定义无轮廓；dotted定义点状轮廓；dashed定义虚线轮廓；solid定义实线轮廓）
outline-width样式属性：设置轮廓线的宽度，使用该样式属性时必须设定outline-style样式属性的属性值不能为none，否则看不到效果（如果outline-style为none，宽度实际上会重置为0）
outlilne样式属性：用于在一个声明中设置所有的轮廓线样式属性（即颜色，样式，宽度），且该样式属性设置属性值时不需要设置所有轮廓线样式属性所对应的属性值，但需按照outline-color，outline-style，outline-width的顺序进行排列，中间用空格隔开

内容溢出样式属性：
overflow样式属性：当标签中的内容溢出标签时，用于设定如何处理溢出的内容，该属性有多个值：visible默认值，所溢出内容不会被修剪，会呈现在元素框之外；scroll所溢出内容会被修剪，但浏览器会显示滚动条以便查看其余的内容；auto如果所溢出内容被修剪，浏览器会显示滚动条以便查看其余的内容
overflow-x样式属性：当标签中的内容x方向溢出标签时，用于设定如何处理溢出的内容
overflow-y样式属性：当标签中的内容y方向溢出标签时，用于设定如何处理溢出的内容

背景样式
background-color样式属性：设置标签背景颜色，该样式属性设置的背景颜色会填充背景的内容，内边距和边框区域，扩展到标签边框的外边界，但不包括外边距
background-image样式属性：设置标签背景图片，该样式属性有多个属性值：url（’URL’）指向图片的路径；none默认值，不显示背景图片
background-repeat样式属性：设置标签背景图片重复模式，该样式属性有多个属性值：repeat默认值，背景图片将在水平和垂直方向重复；repeat-x背景图片将在水平方向重复；repeat-y背景图片将在垂直方向重复；no-repeat背景图片将仅显示一次
background-attachment样式属性：设置标签背景图片是否随着
页面其余部分的滚动而滚动，该样式属性有多个属性值：scroll默认值，背景图片会随着页面其余部分的滚动而滚动；fixed当页面的其余部分滚动时，背景图片不会移动
background-position样式属性：随着标签背景图片的位置
background-size样式属性：设置单张背景图片的尺寸，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
background样式属性：用于在一个声明中设置所有的背景样式属性，且该样式属性设置属性值时不需要设置所有背景样式属性所对应的属性值且设置的属性值没有顺序要求

字体样式
font-style样式属性：设定字体的风格（normal默认值，显示标准的字体风格；italic显示斜体的字体风格）
font-variant样式属性：设定是否以小型大写字母的字体显示文本（normal默认值，显示标准的字体；small-caps显示小型大写字母的字体）
font-weight样式属性：设置字体的粗细（normal默认值，定义标准的字符；bold定义粗体字符；bolder定义更粗的字符；lighter定义更细的字符；值px直接设定）
font-size样式属性：设置字体大小
font-family样式属性：设置字体系列，使用逗号分割每种字体，如果浏览器不支持第一个字体则会尝试第二个字体；如果字体系列中的所有字体都不支持，则使用浏览器默认支持的字体
font样式属性：用于在一个声明中设置所有的字体样式属性，且该样式属性设置属性值时不需要设置所有字体样式属性所对应的属性值，但需要按照font-style、font-variant、font-weight、font-size/line-height和font-family顺序进行排列，中间用空格隔开。
注意：1.font样式属性至少要指定字体大小和字体系列；
2.没有font-color样式属性，如果要设置字体的颜色需要使用color样式属性；

文本样式
letter-spacing样式属性：设置字符间距，样式属性值可以为负，但这时字符之间更加拥挤
line-height样式属性：设置行间距（即行高），不能为负值
text-align样式属性：设置标签内文本的水平对齐方式，该属性有多个值：left把文本排到左边；right把文本排到右边；center把文本排到中间；justify实现两端对齐文本效果
text-transform样式属性：设置文本的大小写，该属性有多个值：none默认值，定义带有小写字母和大写字母的标准的文本；capitalize文本中的每个单词首字母大写；uppercase定义仅有大写字母；lowercase定义仅有小写字母
text-indent样式属性：设定文本块中首行文本的缩进，如果样式属性值为负值，则首行会被缩进到左边
text-decoration样式属性：设定文本装饰（比如是否有下划线及划线显示的位置），该属性有多个值：none默认值，定义标准的文本；underline定义文本下的一条线；overline定义文本上的一条线；line-through定义穿过文本的一条线

列表样式
list-style-type样式属性：设置列表项标记的类型
list-style-position样式属性：设置列表项标记相对于列表项内容的位置，该属性有多个值：inside列表项目标记放置在文本以内；outside默认值，保持标记位于文本的左侧，列表项目标记放置在文本以外
list-style-image样式属性：将列表项标记设定为指定的图片
list-style样式属性：用于在一个声明中设置所有的所有的列表样式属性，且该样式属性设置属性值时不需要设置所有列表样式属性所对应的属性值，但需要按照list-style-type、list-style-position和list-style-image顺序进行排列，中间用空格隔开

超链接样式
CSS 伪类用于向某些选择器添加特殊效果，伪类使用语法：

选择器:伪类{
    样式属性声明1;    ...}

Copy after login

CSS中常用的伪列如下：
：link 向未被访问的链接添加样式
：visited 向已被访问的链接添加样式
：hover 当鼠标悬浮在标签上时向标签添加样式
：active 向被激活的标签添加样式
：focus 向拥有键盘输入焦点的标签添加样式
注意：如果:link，:visited，:hover和:active一起使用，为了产生预期的效果，在 CSS 定义中需按照:link、:visited，:hover，:active的顺序进行

光标样式属性
cursor样式属性用于设定光标的显示形状，该属性有多个属性值，其中pointer使光标呈现为指示链接的指针