CSS 속성

말 몸 속 성

字体属性	描      述
font-family	用一个指定的字体名或一个种类的字体族科
font-size	字体显示的大小
font-style	以3个方法其中的一个来定义显示的字体：normal（普通），italic（斜体）或oblique（倾斜）
font-weight	以bold为值可以使字体加粗
font-variant	设置英文大小写转换
	font{font-family: "宋体"; font-size: 12px;  font-style: normal; line-height: 20px;font-weight: bold; font-variant: normal; text-transform: capitalize; color: #666666;  text-decoration: underline;}

글꼴 속성

설명

글꼴 모음

지정된 글꼴 이름 또는 글꼴 모음 유형 사용

文本属性	描        述
letter-spacing	定义一个附加在字符之间的间隔数量
word-spacing	定义一个附加在单词之间的间隔数量
text-decoration	文本修饰属性允许通过5个属性中的一个来修饰文本
text-align	设置文本的水平对齐方式，包括左对齐、右对齐、居中、两端对齐
text-indent	文字的首行缩进
line-height	行高属性接受一个控制文本基线之间的间隔的值
text-transform	控制英文文字大小写
	font{letter-spacing: 2em; text-align: left; text-indent: 10px; vertical-align: middle; word-spacing: 5em; white-space: normal;}

글꼴 크기

글꼴 표시 크기

글꼴 스타일

표시되는 글꼴을 정의하려면 보통(normal), 기울임꼴(italic) 또는 기울임꼴(oblique)의 3가지 방법 중 하나를 사용하세요.

글꼴 두께

글꼴을 굵게 표시하려면 Bold 값을 사용하세요

글꼴 변형

영어 대소문자 변환 설정

글꼴{글꼴 계열: "宋体"; 글꼴 스타일: 일반; 줄 높이: 20px; 글꼴-변형: 일반; : #666666; 텍스트 장식: 밑줄;}

文 本 속 성별 텍스트 속성 설명

자간

문자 사이에 추가되는 공백의 양을 정의하세요

단어 간격

단어 사이에 추가되는 공백의 양을 정의하세요

텍스트 장식

텍스트 수정 속성을 사용하면 5가지 속성 중 하나로 텍스트를 수정할 수 있습니다

텍스트 정렬

왼쪽, 오른쪽, 가운데, 양쪽 맞춤을 포함하여 텍스트의 가로 정렬을 설정합니다.

텍스트 들여쓰기

첫 번째 줄은 들여쓰기됩니다

줄 높이

line-height 속성은 텍스트 기준선 사이의 간격을 제어하는 ​​값을 허용합니다

텍스트 변환

영문 대소문자 조절

font{letter-spacing: 2em; text-align: left; text-indent: 10px; word-spacing: 일반;}

측면 상자 속성

边  框  属  性	描       述
border	边框
border-top	上边框
border-left	左边框
border-right	右边框
border-bottom	下边框
border-color	边框颜色
border-style	边框样式
border-width	边框宽度
border-top-color	上边框颜色
border-left-color	左边框颜色
border-right-color	右边框颜色
border-bottom-color	下边框颜色
border-top-style	上边框样式
border-left-style	下边框样式
border-right--style	右边框样式
border-bottom-style	下边框样式
border-top-width	上边框宽度
border-left-width	下边框宽度
border-right-width	右边框宽度
border-bottom-width	下边框宽度
	border{ border-top-width: 1px; border-top-style: dotted; border-top-color: #FF0000;}

국경재산 설명

테두리

테두리

국경-상단

상단 테두리

경계-왼쪽

왼쪽 테두리

경계-오른쪽

오른쪽 테두리

테두리-하단

하단 테두리

테두리 색상

테두리 색상

테두리 스타일

테두리 스타일

테두리 너비

테두리 너비

테두리-상단 색상

상단 테두리 색상

테두리-왼쪽-색상

왼쪽 테두리 색상

테두리 오른쪽 색상

오른쪽 테두리 색상

테두리-하단-색상

하단 테두리 색상

보더탑스타일

상단 테두리 스타일

테두리 왼쪽 스타일

하단 테두리 스타일

border-right-style

오른쪽 테두리 스타일

테두리 하단 스타일

하단 테두리 스타일

테두리 상단 너비

상단 테두리 너비

테두리-왼쪽-너비

하단 테두리 너비

테두리 오른쪽 너비

오른쪽 테두리 너비

테두리-하단-너비

하단 테두리 너비

테두리{ 테두리 상단 너비: 1px; 테두리 상단 스타일: 점선: #FF0000;}

테두리 속성 설정값

边框样式属性值	描       述
none	无边框
dotted	边框由点组成
dash	边框由短线组成
solid	边框是实线
double	边框是双实线
groove	边框带有立体感的沟槽
ridge	边框成脊槽
inset	边框内嵌一个立体边框
outset	边框外嵌一个立体边框

테두리 스타일 속성 값

설명

없음

국경 없음

점선

定位属性	描       述
position	absolute（绝对定位）relative（相对定位）
top	层距离顶点纵坐标的距离
left	层距离顶点横坐标的距离
width	层的宽度
height	层的高度
z-index	决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素
clip	限定只显示裁切出来的区域。裁切出来的区域为矩形。只要设定两个点即可。一个是矩形左上角的顶点，由top和right两项的设置完成。另一个是右下脚的顶点，由bottom和right两项的设置完成
overflow	当层内的内容超出层所能容纳的范围时，Visible：无论层的大小，内容都会显示出来；Hidden：会隐藏超出层的大小的内容；scrol：不管内容是否超出层的范围，选中此项都会为层添加滚动条；auto：只在内容超出层的范围时才显示滚动条
visibility	这一项是针对嵌套层的设置，嵌套层插入在其他层中的层，分为嵌套的层（子层）和被嵌套的层（父层）。Inherit：子层继承父层的可见性，父层可见，子层也可见；父层不可见，子层也不可见。Visible：无论父层可见与否，子层都可见。Hidden：无论父层可见与否，子层都隐蔽。

테두리는 점으로 구성됩니다

대시

테두리는 짧은 선들로 구성되어 있습니다

단단함

테두리가 실선입니다

더블

테두리가 이중실선입니다

그루브

프레임에 입체적인 홈이 있습니다

능선

경계가 능선을 이룬다

삽입

프레임 안에 입체적인 프레임이 내장되어 있습니다

시작

프레임 외부에 입체적인 프레임이 내장되어 있습니다

의지 비트 속 성 위치 속성 설명

위치

절대(절대 위치) 상대(상대 위치)

위로

레이어와 정점의 수직 좌표 사이의 거리

남음

레이어와 정점의 가로좌표 사이의 거리

너비

레이어 너비

키

레이어 높이

Z-색인

레이어의 순서와 적용 범위 관계를 결정합니다. 값이 높은 요소는 값이 낮은 요소를 덮습니다

클립

잘린 영역만 표시하도록 제한합니다. 잘린 영역은 직사각형입니다. 두 점만 설정해주세요. 하나는 직사각형의 왼쪽 위 꼭지점인데 위쪽과 오른쪽의 설정으로 완성됩니다. 다른 하나는 오른쪽 아래 발의 정점으로, 아래와 오른쪽의 세팅으로 완성됩니다

넘쳐

레이어의 콘텐츠가 레이어가 수용할 수 있는 범위를 초과하면 표시: 레이어 크기에 관계없이 콘텐츠가 표시됩니다. 숨김: 레이어 크기를 초과하는 콘텐츠는 스크롤됩니다. 콘텐츠가 레이어 범위를 초과하는지 여부에 관계없이 이 옵션을 선택하면 레이어에 스크롤 막대가 추가됩니다. 자동: 콘텐츠가 레이어 범위를 초과할 때만 스크롤 막대를 표시합니다.

공개

중첩 레이어를 설정하는 항목입니다. 중첩 레이어는 다른 레이어에 삽입되며 중첩 레이어(하위 레이어)와 중첩 레이어(상위 레이어)로 구분됩니다. 상속: 하위 레이어는 상위 레이어의 가시성을 상속합니다. 상위 레이어가 표시되면 하위 레이어도 표시됩니다. 상위 레이어가 표시되지 않으면 하위 레이어도 표시되지 않습니다. 표시됨: 상위 레이어가 표시되는지 여부에 관계없이 하위 레이어가 표시됩니다. 숨김: 상위 레이어가 표시되는지 여부에 관계없이 하위 레이어가 숨겨집니다.

구역블록 속성

区块属性	描       述
width	设定对象的宽度
height	设定对象的高度
float	让文字环绕在一个元素的四周
clear	指定在某一个元素的某一边是否允许有环绕的文字或对象
padding	决定了究竟在边框与内容之间应该插入多少空间距离。它有四个属性，分别是：top（上）、right（右） 、bottom（下）、left（左）分别用于设定上下左右的填充距。
margin	决定了内容区块距离外边元素有多少空间距离。分别是：top（上）、right（右） 、bottom（下）、left（左）分别用于设定上下左右的填充距。
	#alignLeft{float:left;margin:0;padding:0;width:100px;height:100px;clear:both}

블록 속성

설명

列表属性	描      述
list-style-type	设定引导列表项目的符号类型
list-style-image	选择图象作为项目的引导符号 li{ list-style-image:url(14-25.gif)}
list-stle-position	决定列表项目所缩进的程度

너비

개체의 너비 설정

키

물체의 높이 설정

플로트

요소 주위에 텍스트 배치

맑음

요소의 특정 면에 주변 텍스트나 개체를 허용할지 여부를 지정합니다.

패딩

테두리와 내용 사이에 얼마나 많은 공백을 삽입해야 하는지 결정합니다. 위쪽(상단), 오른쪽(오른쪽), 아래쪽(하단), 왼쪽(왼쪽)의 네 가지 속성이 있으며 각각 위쪽, 아래쪽, 왼쪽, 오른쪽 패딩 거리를 설정하는 데 사용됩니다.

마진

콘텐츠 블록이 외부 요소로부터 얼마나 많은 공간을 확보하는지 결정합니다. 위쪽(상단), 오른쪽(오른쪽), 아래쪽(하단), 왼쪽(왼쪽)은 각각 위쪽, 아래쪽, 왼쪽, 오른쪽 패딩 거리를 설정하는 데 사용됩니다.

#alignLeft{float:left;margin:0;padding:0;width:100px;height:100px;clear:both}

열 테이블 속성 목록 속성 설명

목록 스타일 유형

부팅 목록 항목의 기호 유형을 설정

목록 스타일 이미지

프로젝트 안내 기호로 이미지를 선택하세요

li{ list-style-image:url(14-25.gif)}

목록-위치

목록 항목 들여쓰기 정도 결정

목록 기호 유형 속성 값

列表符号类型属性值	描      述
disc	在文本行前面加“●”实心圆
circle	在文本行前面加“○”空心圆
spuare	在文本行前面加“■”实心方块
decimal	在文本行前面加普通的阿拉伯数字
lower-roman	在文本行前面加小写罗马数字
upper-roman	在文本行前面加大写罗马数字
lower-alpha	在文本行前面加小写英文字母
upper-alpha	在文本行前面加大写英文字母
none	不显示任何项目符号或编号
	#alignLeft li { list-style-image: url(images/arrow1.gif); list-style-type: none;list-style-position: outside;}

목록 기호 유형 속성 값

列表位置属性值	描         述
outside	列表贴近左侧边框
inside	列表缩进

설명

디스크

텍스트 줄 앞에 “●” 단색 원을 추가하세요

서클

텍스트 줄 앞에 "○" 속이 빈 원을 추가하세요

스페어

텍스트 줄 앞에 "■" 정사각형을 추가하세요

십진수

텍스트 줄 앞에 일반 아라비아 숫자를 입력하세요

하로만

텍스트 줄 앞에 로마 숫자 소문자를 입력하세요

로마자

대문자 로마 숫자를 텍스트 줄 앞에 두세요

하위 알파

텍스트 줄 앞에 영문 소문자 추가

상위 알파

텍스트 줄 앞에 영문 대문자 추가

없음

글머리 기호나 숫자를 표시하지 않습니다

#alignLeft li { list-style-image: url(images/arrow1.gif);

목록 스타일 유형: 없음;목록 스타일 위치: 외부;}

목록 위치 속성 값 목록 위치 속성 값 설명

밖

목록이 왼쪽 테두리에 가깝습니다

내부

목록 들여쓰기

/*댓글은 이렇게 작성합니다*/

몸 {

/*텍스트 속성*/

글꼴 크기:12px;/*텍스트 크기*/ 색상:#CCCCCC;/*텍스트 색상*/

글꼴 계열:Arial, Helvetica, sans-serif;/*글꼴 설정*/

font-weight:bold;/*굵은 텍스트*/

text-align:center;/*DIV 태그의 내부 가로 방향은 중앙 또는 왼쪽, 왼쪽, 오른쪽입니다*/

텍스트 장식:밑줄;/*밑줄 밑줄 없음은 없음*/

line-height:150%;/*줄 높이는 픽셀일 수도 있습니다px*/

/*배경 속성*/

/*배경 색상*/

배경 이미지:url(images/test.gif);/*배경 이미지*/

background-repeat:no-repeat;/*배경 이미지가 타일링되지 않습니다*/

background-position:5px 10px;/*배경 이미지의 위치, 첫 번째는 가로좌표, 두 번째는 세로좌표*/

/*패딩 및 테두리 속성*/

높이: 100px; 너비: 100px;

margin:10px 0 5px 0;/*컨테이너 외부 여백 순서는 위쪽 오른쪽 아래쪽 왼쪽, 0이면 단위가 필요하지 않습니다*/

margin-top:10px; /*단일 항목 작성 방법 */

padding:10px 0 5px 0;/*컨테이너 내부 여백, 순서는 위 오른쪽 아래 왼쪽 , 0이면 단위가 필요하지 않습니다 */

float:left; /*1. 열 구조를 만들 때는 왼쪽 오른쪽과 */

만 사용하세요.

/*속성 나열*/

list-style-type:none;/*ul 순서가 지정되지 않은 목록 li 앞에 있는 작은 검은 점을 제거합니다.*/

display:block;/*블록 형식으로 표시되며 일반적으로 링크에서 마우스 오버 효과를 얻는 데 사용됩니다*/

display:inline;/*IE6의 버그를 대상으로 float를 사용할 때 옆으로 이동하는 DIV의 외부 여백이 두 배가 되는 경우에만 사용하세요*/

/*테두리 속성*/

border:1px solid #ccc;/*테이블, DIV, LI, A 및 기타 컨테이너의 테두리 속성, 점선은 점선으로 표시됨*/

overflow:hidden;/*오버플로 부분 숨기기*/overflow:auto;/*컨테이너 높이를 자동으로 결정하고 세로 스크롤 막대 자동 표시/숨기기 선택*/

/*특수속성, 강제로 마스터할 필요는 없습니다*/

/*세로 텍스트 배열:*/writing-mode: tb-rl;

/*미리 지정된 형식*/<사전>

/*문자 간격*/ letter-spacing:5px;

/*단어 간격*/ word-spacing:5px;

}

위치 속성	설명
직위	절대(절대 위치 지정) 상대(상대 위치 지정)
위	레이어 사이의 거리와 정점의 수직 좌표
왼쪽	레이어와 정점의 가로좌표 사이의 거리
너비	레이어 너비
키	레이어 높이
Z-색인	레이어의 순서와 적용 범위를 결정합니다. 값이 높은 요소는 값이 낮은 요소를 덮습니다.
클립	잘린 영역만 표시하도록 제한합니다. 잘린 영역은 직사각형입니다. 두 점만 설정해주세요. 하나는 직사각형의 왼쪽 위 꼭지점인데 위쪽과 오른쪽의 설정으로 완성됩니다. 다른 하나는 오른쪽 아래 발의 정점으로, 아래와 오른쪽의 세팅으로 완성됩니다
넘침	레이어의 콘텐츠가 레이어가 수용할 수 있는 범위를 초과하는 경우 표시: 레이어 크기에 관계없이 콘텐츠가 표시됩니다. 숨김: 레이어 크기를 초과하는 콘텐츠가 숨겨집니다. 콘텐츠가 레이어 범위를 초과하는지 여부에 관계없이 이 옵션을 선택하면 레이어에 스크롤 막대가 추가됩니다. 자동: 콘텐츠가 레이어 범위를 초과할 때만 스크롤 막대를 표시합니다.
가시성	중첩 레이어를 설정하는 항목입니다. 중첩 레이어는 다른 레이어에 삽입되며 중첩 레이어(하위 레이어)와 중첩 레이어(상위 레이어)로 구분됩니다. 상속: 하위 레이어는 상위 레이어의 가시성을 상속합니다. 상위 레이어가 표시되면 하위 레이어도 표시됩니다. 상위 레이어가 표시되지 않으면 하위 레이어도 표시되지 않습니다. 표시됨: 상위 레이어가 표시되는지 여부에 관계없이 하위 레이어가 표시됩니다. 숨김: 상위 레이어가 표시되는지 여부에 관계없이 하위 레이어가 숨겨집니다. CSS