CSS에서 일반적으로 사용되는 스타일 요약 및 CSS에서 일반적으로 사용되는 속성 요약-CSS 튜토리얼-php.cn

이 글은 CSS에서 일반적으로 사용되는 스타일과 CSS에서 일반적으로 사용되는 속성에 대한 요약을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.表CSS 스타일 테이블:

기능: HTML 태그 표시 방법 설정

문법 구조:

첫 번째 유형: 선택기 {

스타일 속성 문; 또는 이 유형의 스타일 시트로 구성된 여러 선언은 다음에서만 정의할 수 있습니다. 스타일 태그 또는 CSS 파일, 각 스타일 태그 또는 CSS 파일은 여러 스타일 시트를 정의할 수 있습니다

두 번째 유형: 스타일="스타일 속성 선언 1; 스타일 속성 선언 2;..."설명: 이 CSS 스타일 시트 스타일은 하나 이상의 선언 중 이 유형의 스타일 시트는 스타일 태그 속성에서만 정의할 수 있습니다. HTML 문서의 각 태그에는 스타일 태그가 있습니다. 스타일 시트의 선언은 스타일 속성(비레이블 속성, 즉 스타일 속성을 라벨 속성으로 직접 사용할 수 없음)과 스타일 속성 값으로 구성됩니다. 콜론으로 구분합니다. 선언을 구분하려면 세미콜론을 사용하세요.

참고: 1. 스타일 속성에 여러 스타일 속성 값이 있는 경우 스타일 속성 값은 쉼표로 구분됩니다
2. 대소문자를 구분하지 않으며 공백은 무시되지 않습니다.

3. 속성 값이 여러 단어로 구성된 경우 작은따옴표를 사용하는 것이 좋습니다.

선택자:

태그 선택자:

태그 선택자는 속성에 정의된 태그 이름을 사용합니다. HTML 문서를 선택기 이름으로 사용하며 해당 구문은 다음과 같습니다.

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

로그인 후 복사

Action 개체: 태그 이름과 태그 선택기 이름이 동일한 HTML 문서의 모든 태그가 영향을 받습니다.

클래스 선택기: 클래스 선택 선택기는 다음을 사용합니다. 태그에 있는 클래스 태그 속성의 속성 값은 다음과 같습니다.

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

로그인 후 복사

Action 개체: 클래스 태그 속성과 클래스 선택기의 속성 값이 영향을 받습니다. 클래스 태그 속성은 숫자로 시작할 수 없습니다.
id 선택기: id 선택기는 태그에 있는 id 태그 속성의 속성 값을 선택기 이름으로 사용합니다.

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

로그인 후 복사

Action 개체: 속성 값만 사용합니다. id 태그 속성 및 id 선택기# 동일한 태그만 영향을 받습니다. 참고: id 태그 속성의 속성 값은 숫자로 시작할 수 없습니다. id 태그 속성의 속성 값은 HTML 문서에서 고유해야 하며, class 태그 속성의 속성 값은 고유할 필요가 없습니다. 하위 선택기:

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

로그인 후 복사

참고: 선택기 공백을 사용하여 구분

그룹 선택기:
HTML 문서의 여러 CSS 스타일 시트에 있는 일부 스타일이 동일한 경우 그룹 선택기를 정의하여 CSS 스타일을 단순화하여 추출할 수 있습니다. 이 유형의 선택기 이름은 쉼표로 구분된 여러 선택기로 구성됩니다. 구문은 다음과 같습니다.

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

로그인 후 복사

와일드카드 선택기:

와일드카드 선택기는 코드의 모든 태그를 나열하는 그룹 선택기와 동일합니다. HTML 문서 구문은 다음과 같습니다.

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

로그인 후 복사

CSS 스타일을 사용하는 방법

HTML에 CSS 스타일을 삽입하는 방법에는 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일

외부 스타일 시트: 스타일을 삽입할 때 여러 HTML 문서의 일부 태그 규칙은 동일합니다. 이러한 스타일 시트의 재사용을 실현하고 스타일 시트 관리를 용이하게 하기 위해 CSS 스타일은 CSS 스타일 파일에 작성되고 링크 태그는

추가: 링크 태그는 문서 헤드에 HTML 작은 아이콘을 설정하는 데에도 사용됩니다. 구문 구조: < link rel=”shortcut icon” type=”image/x -icon” href=”이미지 경로” />

내부 스타일 시트:
HTML 문서에 있는 경우 다른 HTML 문서에서는 스타일이 공통되지 않지만 이 HTML 문서에 있는 여러 태그의 스타일은 동일합니다. 이러한 스타일 규칙을 재사용하고 스타일 규칙 관리를 용이하게 하려면 CSS 스타일을 HTML에 직접 작성해야 합니다.
문서의 스타일 태그 내 인라인 스타일:

HTML 문서의 특정 태그 스타일이 있는 경우 다른 태그 스타일과 다르거나 문서의 태그 스타일이 상위 태그 스타일과 일치하지 않는 경우 CSS 스타일이 HTML로 작성된 경우 문서에 있는 레이블의 스타일 태그 속성 값에

CSS 스타일 우선순위

선택기 우선순위: id 선택기>클래스 선택기>레이블 선택기이며 선택기 우선순위는 선택기를 고려하지 않습니다.

스타일 삽입 방법 우선순위:

CSS 스타일 삽입의 일반적인 순서를 따르는 경우( 즉, 먼저 링크를 사용하여 외부 스타일 시트를 삽입한 다음 스타일 태그를 사용하여 내부 스타일 시트를 삽입하고 마지막으로 스타일 태그 속성에 인라인을 삽입합니다. 스타일 측면에서는 인라인 스타일 > 내부 스타일 시트 > 외부 스타일 시트가 우선순위입니다

常用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;

로그인 후 복사

轮廓线样式属性：轮廓线是在标签边框边缘绘制一条线，该线不会占据空间，也不一定是矩形，主要起到突出标签的作用
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;    ...}

로그인 후 복사

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

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