집 > 기사 > 웹 프론트엔드 > CSS 스타일시트, 상속, 계단식 배열 및 속성 값 분석

CSS 스타일시트, 상속, 계단식 배열 및 속성 값 분석

高洛峰원래의: 2017-03-13 14:57:001487검색

이 글에서는 CSS 스타일 시트, 상속, 캐스케이딩 및 속성 값을 분석합니다.

스타일 시트를 구성하고 추가합니다. 주의사항

1. CSS에는 기본 형식(예: font-size 및 색상 등)을 제어하는 속성이 있으며, 제어 레이아웃(예: 위치 및 부동 등)과 인쇄 시 방문자가 페이지를 변경할 위치를 결정하는 인쇄 제어 요소입니다. 이 외에도 많은 다른 속성이 있습니다.
2. 스타일 시트에는 웹페이지의 모양을 정의하는 규칙이 포함되어 있습니다. 각 규칙은 선택기(선택)와 선언 블록(선언)이라는 두 가지 주요 부분으로 구성됩니다. 선택기는 영향을 받는 요소를 결정하고 선언 블록은 수행해야 할 작업을 지정하는 하나 이상의 속성-값 쌍으로 구성됩니다.
3. 댓글은 '/*和*/'으로 둘러싸여 있습니다.

상속의 이해

1. 상속은 요소에 CSS 속성을 적용하는 것으로 이해하면 됩니다 , 이러한 속성은 이 요소뿐만 아니라 그 아래의 가지 요소에도 영향을 미칩니다.

프로그램 1

<body>
<p>
    <h1>The Ephemeral Blue Flax</h1>

    <img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" />

    <p>I am continually <em>amazed</em> at the beautiful, delicate Blue Flax that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p>

    <p><small>&copy; Blue Flax Society.</small></p>
</p>
</body>

프로그램 1과 마찬가지로 모든 콘텐츠 요소는 body 요소의 하위 요소이며 p로 패키징됩니다. 게다가 모든 콘텐츠를 포괄하는 em 및 small 요소는 p 요소 내에 포함되므로 p의 자손입니다(그리고 p과 body 둘 다의 자손).

프로그램 2

body {
    font-family: Verdana, Geneva, sans-serif;
}

p {
    border: 1px solid black;
    overflow: hidden;
    padding: 0 1em .25em;
}

p {
    color: #36c; /* a blue color */
    font-weight: bold;
}

img {
    float: left;
    margin-right: 1em;
}

프로그램 2는 CSS 스타일 설정입니다. 이 스타일 시트는 프로그램 1의 HTML에 대한 스타일을 설정합니다. 상속의 특징. 프로그램 2에는 body, p 및 p 요소에 대한 스타일 규칙만 있고 h1, em 및 small 요소에 대한 규칙은 없음을 알 수 있습니다. 그러면 페이지가 표시될 때 상속 특성이 h1, em 및 small 요소에 반영됩니다.

2. 다음은 상속될 CSS 속성이며 여기에 체계적으로 나열됩니다.

텍스트

속성 이름

속성 함수

color

Color , 요소 제외

방향

属性名称	属性作用
color	颜色，a元素除外
direction	方向
font	字体
font-family	字体系列
font-size	字体大小
font-style	用于设置斜体
font-variant	用于设置小型大写字母
font-weight	用于设置粗体
letter-spacing	字母间距
line-height	行高
text-align	用于设置对齐方式
text-indent	用于设置首行缩进
text-transform	用于修改大小写
visibility	可见性
white-space	用于指定如何处理空格
word-spacing	字间距

방향

글꼴

글꼴 계열 /td >

글꼴 계열

글꼴 크기

글꼴 스타일

은 기울임꼴을 설정하는 데 사용됩니다

font-variant

작은 대문자를 설정하는 데 사용됩니다. 글자

글꼴 두께

는 볼드체를 설정하는 데 사용됩니다.

문자 간격

줄 높이

text-align

는 다음과 같은 용도로 사용됩니다. 정렬 설정

텍스트 들여쓰기

첫 줄 들여쓰기를 설정하는 데 사용됩니다.

text-transform

대소문자 수정에 사용

가시성

属性名称	属性作用
list-style	列表样式
list-style-image	用于为列表制定定制的标记
list-style-position	用于确定列表标记的位置
list-style-type	用于设置列表的标记

가시성

공백

은 공백 처리 방법을 지정하는 데 사용됩니다.

단어 간격

속성 이름	속성 함수
목록 스타일	목록 스타일
list-style-image	목록에 대한 사용자 정의 태그 개발에 사용
list-style-position	목록 표시의 위치를 결정하는 데 사용됩니다
목록 스타일 유형 td >	목록을 설정하는 데 사용되는 태그

테이블

테이블 제목의 위치를 설정하는 데 사용됩니다.

속성 이름

속성 함수

border-collapse

属性名称	属性作用
border-collapse	用于控制表格相邻单元格的边框是否合并为单一边框
border-spacing	用于指定表格边框之间的间隙大小
caption-side	用于设置表格标题的位置
empty-cells	用于设置是否显示表格中的空单元格

테이블에서 인접한 셀의 테두리를 단일 테두리로 병합할지 여부를 제어하는 데 사용됩니다.

border-spacing

테이블 테두리 사이의 간격 크기를 지정하는 데 사용 td>

캡션측

empty-cells

는 테이블에 빈 셀을 표시할지 여부를 설정하는 데 사용됩니다.

属性名称	属性作用
orphans	用于设置当元素内部发生分页时在页面底部需要保留的最少行数
page-break-inside	用于设置元素内部的分页方式
widows	用于设置当元素内部发生分页时在页面顶部需要保留的最少行数

페이지 설정(인쇄물용)

widows

속성 이름	속성 효과
orphans	는 페이지 매김 시 페이지 하단에 유지해야 하는 최소 줄 수
page-break -inside	페이징을 설정하는 데 사용됩니다. 요소 내부 메소드
페이지 내부에서 페이징이 발생할 때 페이지 상단에 유지해야 하는 최소 행 수를 설정하는 데 사용됩니다. 요소

属性名称	属性作用
cursor	鼠标指针
quotes	用于指定引号样式

기타

계단식: 규칙이 충돌을 해제할 때

작성한 스타일이 브라우저의 기본 스타일과 충돌하는 경우 작성한 스타일이 우선 적용됩니다. 이를 바탕으로 CSS는 계단식 원칙을 사용하여 충돌하는 규칙 중 어떤 규칙이 적용되어야 하는지를 결정하기 위해 구체성, 순서 및 중요도를 고려합니다.

특정성

选择器	对应的HTML
`p { ... }`	`<p>...</p>`
`.some<a href="http://www.php.cn/wiki/164.html" target="_blank">Class</a> { ... }`	`<p class="someClass">...</p>`
`#someID { ... }`	`<p id="someID">...</p>` `<p id="someID" class="someClass">...</p>` `<p id="someID" class="someOtherClass">...</p>` `<p id="someID" class="someClass someOtherClass">...</p>`

특이성 규칙은 선택자가 얼마나 구체적인지 지정합니다. 선택자가 더 구체적일수록 규칙이 더 강력해집니다. 충돌이 발생하면 보다 구체적인 규칙이 먼저 적용됩니다. 일부 선택기 나열: (낮은 수준에서 높은 수준으로 정렬)

선택기	해당 HTML
`p { ... }`	`<p>..</p&gt ;`
`.some<a href="http://www.php.cn/wiki/164.html " target="_blank" >클래스<🎜> { ... }`	`<p class="someClass">...</p> code>`
`#someID { ... }`	`<p id="someID"> p><p id="someID" class="someClass">...</p><p id= "someID" class="someOtherClass">...</p><p id="someID" class="someClass someOtherClass"> p>`

순서

상충되는 규칙 중 어느 것이 우선되어야 하는지 결정하기에 구체성이 충분하지 않은 경우. 이때, 순서 규칙이 적용됩니다. 즉 나중에 나타나는 가 보다 우선순위가 높습니다.

중요성

위의 규칙으로 충분하지 않은 경우 전체 시스템의 규칙을 포괄하는 특수 규칙을 선언할 수 있습니다. . 명령문 끝에 ！important를 추가할 수도 있습니다(예: p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank"> range<code>p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank">range</a> !important; } !important; } (이 방법은 특별한 경우가 아니면 권장하지 않습니다.)

속성 값

inherit

이 속성의 값이 해당 요소의 상위 요소에 의해 설정된 값과 동일함을 나타내려면 inherit 값을 사용할 수 있습니다. 예를 들어 여러 단락을 포함하는 article 요소가 있다고 가정해 보겠습니다. article 요소는 테두리를 설정하며 일반적으로 테두리는 상속되지 않으므로 p { border: inherit; } 규칙을 사용하면 이러한 단락이 동일한 테두리 스타일을 얻을 수 있습니다.

길이 및 백분율

1. 많은 CSS 속성의 값은 길이입니다. 일부 길이는 다른 값에 상대적입니다. em의 길이는 해당 요소의 글꼴 크기와 대략 같습니다. 예를 들어 요소에 <a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left<code><a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a>: 2em: 2em를 설정하면 다음을 의미합니다. 요소의 왼쪽 여백은 요소의 글꼴 크기의 두 배로 설정됩니다. em을 사용하여 요소 자체의 font-size 속성을 설정하는 경우 해당 값은 해당 요소의 상위 요소의 글꼴 크기에서 상속됩니다. em의 이러한 상대성은 오늘날의 웹 사이트 구축 작업, 특히 다양한 화면 크기에 적응해야 하는 작업(반응형 웹 디자인으로 알려진 방식)에 매우 중요합니다.
2. 백분율은 em과 매우 비슷하게 작동하며, 백분율은 일반적으로 상위 요소를 기준으로 합니다.

순수 숫자

단위 없이 숫자를 허용하는 CSS 속성은 몇 가지 뿐이며 가장 일반적인 속성은 line-height , <a href="http://www.php.cn/wiki/903.html" target="_blank">z-index<code><a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a> 및 opacity, 예:line-height: 1.5; 이 예의 값은 글꼴 크기, 즉 줄 높이를 곱합니다.

URL

개발자가 다른 파일(특히 이미지)의 URL을 지정할 수 있는 CSS 속성이 있습니다. background-image가 그러한 속성입니다. 이 경우 url(file.ext)을 사용하세요. 여기서 file.ext는 대상 리소스의 경로와 파일 이름입니다. 사양에는 상대 URL이 스타일 시트의 위치를 기준으로 해야 하며 HTML 문서의 위치를 기준으로 해서는 안 된다고 명시되어 있습니다(예: background: url(bg-pattern.png)). 참고: CSS 속성의 URL은 따옴표로 묶을 필요가 없습니다.

CSS 색상

16가지 기본 색상 키워드

颜色	关键字
aqua（水绿）	#00FFFF
black（黑）	#000000
blue（蓝）	#0000FF
fuchsia（紫红）	#FF00FF
gray（灰）	#808080
green（绿）	#008000
lime（浅绿）	#00FF00
maroon（褐）	#800000
navy（深蓝）	#000080
olive（橄榄）	#808000
purple（紫）	#8000080
red（红）	#FF0000
silver（银）	#C0C0C0
teal（深青）	#008080
white（白）	#FFFFFF
yellow（黄）	#FFFF00

RGB

빨간색, 녹색, 파란색의 양을 지정하여 나만의 색상을 구성할 수 있으며, 0~ 사이의 백분율을 사용할 수 있습니다. 255 숫자는 이 세 가지 색상의 값을 지정합니다(예: color: rgb(89, 0, 127); 또는 color: rgb(35%, 0%, 50%);, 89는 255의 35%이기 때문).

Hex

이는 CSS에서 색상을 정의하는 가장 일반적인 방법입니다(예: color: #59007F). #FF3344이면 #F34로 줄여 쓸 수 있다.

더 많은 CSS3 색상 지정 방법

RGBA, HSLA 및 HSL.
CSS3에는 HSL을 통해 색상을 지정하는 방법과 RGBA 및 HSLA를 통해 알파 투명도를 설정하는 기능이 도입되었습니다.
RGBA는 RGB에 알파 투명도(알파 투명도) A를 추가합니다. 투명도는 RGB 뒤에 0부터 1까지의 소수점을 추가하여 지정할 수 있습니다. 예:<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>: rgba(89,0,127,0.75).
HSL과 HSLA가 CSS3에 새로 추가되었습니다. HSLA는 RGBA 외에 색상의 투명도를 지정하는 또 다른 방법입니다. HSLA를 사용하여 투명도를 지정하는 방법은 RGBA와 일치합니다(예: color: hsla(282,100%,25%,0.75)).
HSL은 색상, 채도, 밝기를 나타냅니다. 색상의 값 범위는 0~360이고, 채도와 밝기의 값은 0~100% 범위의 백분율입니다. 0과 360은 상단에서 만납니다. 즉, 0과 360은 같은 색상(빨간색, 예: color: hsl(282,100%,25%))을 나타냅니다.
HSL을 생각해 보세요. 0에서 360 사이의 색상을 선택하고 채도를 100%, 밝기를 50%로 설정하면 이 색상의 가장 순수한 형태를 얻을 수 있습니다. 채도를 낮추면 색상이 회색으로 변합니다. 밝기를 높이면 색상이 색상을 유지하는 색상으로 변경되고, 밝기를 낮추면 색상이 검은색으로 변경됩니다.

예를 들어, 아래의 더 중요한 색상 중 일부는 다음과 같습니다.

颜色	hsl数据
红色	hsl(0,100%,50%);
黄色	hsl(60,100%,50%);
绿色	hsl(120,100%,50%);
青色	hsl(180,100%,50%);
蓝色	hsl(240,100%,50%);
紫色	hsl(300,100%,50%);

위 내용은 CSS 스타일시트, 상속, 계단식 배열 및 속성 값 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：CSS3을 사용하여 순환 진행률 표시줄 구현다음 기사：CSS3을 사용하여 순환 진행률 표시줄 구현