> 웹 프론트엔드 > CSS 튜토리얼 > CSS 공통 스타일에 대한 자세한 소개

CSS 공통 스타일에 대한 자세한 소개

高洛峰
풀어 주다: 2017-03-04 10:15:37
원래의
1287명이 탐색했습니다.

font-family 글꼴 이름 설정

여러 이름을 쉼표로 구분하여 사용할 수 있으며 브라우저는 사용 가능한 글꼴을 순서대로 사용합니다

p { font-family:'宋体','黑体','Arial'; }
로그인 후 복사

font-size는 글꼴 크기를 설정합니다

length는 길이 값으로 텍스트 크기를 지정하며 음수 값은 허용되지 않습니다

percentage는 텍스트 크기를 백분율로 지정하고 백분율은 값은 상위 개체의 글꼴 크기를 기반으로 하며 음수 값은 허용되지 않습니다

p { font-size:14px;}
로그인 후 복사

font-weight는 글꼴 두께를 제어합니다

일반 일반 글꼴 , 숫자값 400에 해당

굵게 굵게, 숫자값 700에 해당

100~900 얇은 문자에서 두꺼운 문자로 정의


XML/HTML 코드 콘텐츠를 클립보드에 복사

  1. p {font-weight:bold;}

font-style은 글꼴 기울어짐 여부를 제어합니다

normal은 텍스트 글꼴 스타일을 일반 글꼴로 지정합니다.

italic은 텍스트 글꼴 스타일을 기울임꼴로 지정합니다. 이탤릭체로 디자인되지 않았으며, 이탤릭체 모양을 사용하려면 경사형이 사용됩니다

오블리크 사양 텍스트 글꼴 스타일은 글꼴에서 이탤릭체를 선택하는 대신 텍스트를 인위적으로 기울인 기울어진 글꼴입니다

p { font-style: normal; }   
p { font-style: italic; }   
p { font-style: oblique; }
로그인 후 복사

font(글꼴스타일의 약어)

例:   
p{   
font-style: italic;   
font-weight: bold;   
font-size: 14px;   
line-height: 22px;   
font-family:'宋体';   
}   

缩写后:   
p { font: italic bold 14px/22px '宋体'; }
로그인 후 복사

color 텍스트 색상

•영어 단어, 예: red, yellow, 녹색...

•#으로 시작하는 16진수 표시, 6개의 16진수 문자 또는 숫자 조합(예: #FFFFFF, #000000...

•RGB 모드, 빨간색 0-255 , 녹색 0-255, 파란색 0-255, 예: RGB(120,33,234)

•RGBA 모드, 예: RGBA(255,0,0,0.5), 마지막 A는 50%를 나타냅니다. 투명도

텍스트 장식 텍스트 장식 선

기본값 없음. 표준 텍스트 정의

underline 텍스트 아래에 줄 정의

overline 텍스트에 줄 정의

line-through 텍스트에 줄 정의

깜박임은 깜박이는 텍스트를 정의합니다

h1 {text-decoration:overline;}   
h2 {text-decoration:line-through;}   
h3 {text-decoration:underline;}
로그인 후 복사

text-shadow text-shadow

h-shadow 필수입니다. 수평 그림자의 위치입니다. 음수 허용

v-shadow 필수. 수직 그림자의 위치입니다. 음수 허용

blur 선택사항. 흐린 거리

색상은 선택사항입니다. 그림자 색상

h1{ text-shadow: 2px 2px 2px #ff0000;}
로그인 후 복사

너비: 자동 | 길이

높이: 자동 | 길이

p { width:300px;}   
p { width:50%;}   
img { height:200px;}   
p { height:100px;}
로그인 후 복사

여백: 자동 |

margin-top 위쪽 여백 설정

margin-bottom 아래쪽 여백 설정

margin-left 왼쪽 여백 설정

margin-right 오른쪽 여백

약식:

margin: 위쪽 여백, 오른쪽 여백, 아래쪽 여백, 왼쪽 여백

margin: 위쪽 및 아래쪽 여백, 왼쪽 및 오른쪽 여백

margin: 상단 여백, 왼쪽 및 오른쪽 여백, 하단 여백

p { width:300px; height:100px; margin:10px;}   
p { width:300px; height:100px; margin:0 auto;}
로그인 후 복사

padding: 길이

padding-top은 상단 패딩을 설정

padding-bottom은 하단 패딩을 설정

padding-left는 왼쪽 패딩을 설정

padding-right는 오른쪽 패딩을 설정

p { width:300px; height:100px; padding:10px;}
로그인 후 복사

투명도 불투명도: < ;number>

number 값은 0.0-1.0 사이의 십진수입니다

모든 브라우저와 호환 가능:

p{ filter:alpha(opacity=50); }  /* IE6-IE8 */   
p{ opacity:0.5; }  /* 现代浏览器 */
로그인 후 복사

위의 일반적인 CSS 스타일(공유) 모두 편집자가 공유한 내용입니다. 참고가 되셨으면 좋겠습니다. 또한 PHP 중국어 웹사이트를 지원해 주시길 바랍니다.

일반적으로 사용되는 CSS 스타일에 대한 자세한 소개와 관련 글은 PHP 중국어 홈페이지를 참고해주세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿