집 > 기사 > 웹 프론트엔드 > CSS의 페이지 참조(자세한 설명)

CSS의 페이지 참조(자세한 설명)

青灯夜游원래의: 2018-10-08 15:02:043254검색

이 장에서는 CSS 페이지 참조를 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

css

웹페이지의 스타일을 만들기 위해 CSS는 웹페이지의 내용과 스타일을 분리하기 위해 이런 생각에서 탄생한 것으로 CSS는 Cascading Style Sheets의 약어로 계단식 스타일 시트를 의미합니다. CSS를 사용하면 HTML로 스타일을 표현하는 대부분의 태그가 더 이상 필요하지 않습니다. HTML은 문서의 구조와 내용만 담당하고 표현은 전적으로 CSS에 맡기므로 HTML 문서가 더욱 간결해집니다.

css 기본 구문

CSS 정의 방법은 다음과 같습니다.

선택기 {속성: 값: 값;}# 🎜🎜#

선택자는 스타일을 페이지 요소와 연결하는 이름이고 속성은 설정하려는 스타일 속성입니다. 각 속성에는 하나 이상의 값이 있습니다. 코드 예시:

p{ width:100px; height:100px; color:red }

css 페이지 소개 방법:

1. 외부 링크: 링크 태그를 통해 외부 스타일 시트를 페이지에 연결합니다.

<link>

2. 임베디드: 스타일 태그를 통해 웹 페이지에 임베디드 스타일 시트를 만듭니다.

<style>
    p{ width:100px; height:100px; color:red }
        ......
</style>

3. 인라인: 라벨의 스타일 속성을 통해 라벨에 직접 스타일을 작성합니다.

        <p>......</p>

css 텍스트 설정

적용된 텍스트에 일반적으로 사용되는 CSS 스타일:

#🎜 🎜#

#🎜 🎜#
font-style 다음과 같이 글꼴이 기울어지는지 여부를 설정합니다. 글꼴 스타일:'일반'; 기울어지지 않도록 설정, 글꼴 스타일:'기울임꼴'; 기울일 텍스트
font-weight 다음과 같이 텍스트를 굵게 표시할지 여부를 설정합니다. 🎜🎜#
line-height 텍스트의 줄 높이를 설정합니다. 예: line-height:24px;
text-designation 설정 텍스트에 밑줄을 긋습니다. 예: text-design:none; 텍스트의 밑줄을 제거합니다. #🎜 🎜#
text-indent 텍스트의 첫 번째 줄 들여쓰기를 설정합니다. text-indent:24px; 들여쓰기할 텍스트의 첫 줄을 24px#🎜🎜로 설정합니다. #
text-align 텍스트 가로 정렬 설정(예: text-align:center) 텍스트를 가로 가운데로 설정
CSS 색상 값을 표현하는 세 가지 주요 방법이 있습니다:
#🎜 🎜# 2. RGB 표현, 예: rgb(255,0,0)은 빨간색을 의미합니다

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

css选择器

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：
```
*{margin:0;padding:0}
p{color:red}   

....   
....   
```
2、id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。

举例：
```
#box{color:red} 

....   
```
3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。

举例：
```
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 

....
<h1>....</h1>
....
```
4、层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。

举例：
```
.box span{color:red}
.box .red{color:pink}
.red{color:red}


    ....
    <a>....</a>


<h3>....</h3>
```
5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。

举例：
```
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

....
....
....
```
6、伪类及伪元素选择器

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。
```
.box1:hover{color:red}
.box2:before{content:'行首文字';}
.box3:after{content:'行尾文字';}


....
....
....
```
css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

오버플로 설정:
1. 표시되는 기본값. 콘텐츠는 잘리지 않고 요소 상자 외부에 렌더링됩니다.
2. 숨겨진 내용은 잘리고 나머지 내용은 보이지 않습니다. 이 속성에는 플로트를 지우고 여백 상단 붕괴를 지우는 기능도 있습니다.
3. 스크롤 내용은 잘리지만 나머지 내용을 볼 수 있도록 브라우저에 스크롤 막대가 표시됩니다.
4. 자동 콘텐츠가 잘리면 브라우저에 스크롤 막대가 표시되어 나머지 콘텐츠를 볼 수 있습니다.
5. 상속은 오버플로 속성의 값이 상위 요소에서 상속되어야 함을 규정합니다.

블록 요소, 인라인 요소, 인라인 블록 요소

요소는 레이아웃, 블록 요소, 인라인 요소, 인라인 블록 요소에 일반적으로 사용되는 세 가지 유형의 레이블이 있습니다. 이 세 가지 요소의 특성을 이해해야 합니다. 페이지 레이아웃을 수행하는 데 능숙해집니다.

블록 요소
블록 요소는 선 요소라고도 합니다. p, p, ul, li, h1~h6, dl, dt, dd 등과 같이 레이아웃에서 일반적으로 사용되는 태그는 모두 블록 요소입니다. 레이아웃에서의 동작:
- 모든 스타일 지원
- 너비가 설정되지 않은 경우 기본 너비는 상위 너비의 100%입니다.
- 너비가 설정되어 있어도 상자는 한 줄을 차지합니다
inline 요소
a,span,em,b,strong,i 등과 같이 레이아웃에서 일반적으로 사용되는 태그는 모두 인라인 요소입니다.
- 일부 스타일 지원(너비, 높이, 위쪽 및 아래쪽 여백, 위쪽 및 아래쪽 패딩은 지원되지 않음)
- 너비와 높이는 콘텐츠에 따라 결정됩니다.
- 상자는 한 줄에 배치됩니다
- 코드가 래핑되어 상자 사이에 간격이 생깁니다
- 하위 요소는 인라인 요소입니다. 상위 요소는 text-align 속성을 사용하여 하위 요소의 가로 정렬과 줄 높이를 설정할 수 있습니다.
인라인 요소의 간격을 해결하는 방법
1. 인라인 요소 사이의 줄 바꿈 제거
2. 인라인 요소의 상위 글꼴 크기를 0으로 설정하고 그런 다음 인라인 요소 자체의 글꼴 크기를 설정합니다.

인라인 블록 요소
인라인 블록 요소라고도 하는 인라인 블록 요소는 새로운 요소 유형에 속하지 않습니다. img 및 입력 요소는 유사하게 동작합니다. 이 요소로 분류되지만 표시 속성을 사용하여 블록 요소를 변환하거나 요소를 이 요소로 변환할 수도 있습니다. 레이아웃에서의 동작:
- 모든 스타일 지원
- 너비와 높이가 설정되지 않은 경우 너비와 높이는 내용에 따라 결정됩니다.
- 상자는 한 줄에 있습니다
- 코드 래핑되고 상자에 간격이 생성됩니다
- 하위 요소는 인라인 블록 요소입니다. 상위 요소는 text-align 속성을 사용하여 하위 요소의 가로 정렬을 설정할 수 있으며 line-height 속성 값을 사용하여
이 세 가지 요소는 서로 변환하여 표시 속성을 통해 표시할 수 있지만 실제 개발에서는 블록 요소를 더 자주 사용하므로 인라인 요소를 블록 요소로 변환하는 경우가 많고 작은 인라인 요소를 사용할 때는 블록 요소를 변환하는 대신 인라인 요소를 직접 사용하세요.

display属性
 display属性是用来设置元素的类型及隐藏的，常用的属性有：
 1、none 元素隐藏且不占位置
 2、block 元素以块元素显示
 3、inline 元素以内联元素显示
 4、inline-block 元素以内联块元素显示

浮动

文档流
 文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。

浮动特性

 1、浮动元素有左浮动(float:left)和右浮动(float:right)两种

 2、浮动的元素会向左或向右浮动，碰到父元素边界、浮动元素、未浮动的元素才停下来

 3、相邻浮动的块元素可以并在一行，超出父级宽度就换行

 4、浮动让行内元素或块元素自动转化为行内块元素

 5、浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，形成文字饶图的效果

 6、父元素内整体浮动的元素无法撑开父元素，需要清除浮动

 7、浮动元素之间没有垂直margin的合并

清除浮动
- 父级上增加属性overflow：hidden
- 在最后一个子元素的后面加一个空的p，给它样式属性 clear:both（不推荐）
- 使用成熟的清浮动样式类，clearfix
```
.clearfix:after,.clearfix:before{ content: "";display: table;}
.clearfix:after{ clear:both;}
.clearfix{zoom:1;}
```
 清除浮动的使用方法：
```
.con2{... overflow:hidden}
或者

```
定位

关于定位
我们可以使用css的position属性来设置元素的定位类型，postion的设置项如下：
- relative 生成相对定位元素，元素所占据的文档流的位置不变，元素本身相对文档流的位置进行偏移
- absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了相对或者绝对或者固定定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位。
- fixed는 고정 위치 지정 요소를 생성합니다. 요소는 문서 흐름에서 분리되어 문서 흐름의 위치를 차지하지 않으며 문서 흐름 위에 떠 있고 브라우저 창을 기준으로 배치되는 것으로 이해될 수 있습니다.
- 정적 기본값, 위치 지정 없음, 요소는 일반적인 문서 흐름에 나타납니다. 이는 위치 지정 속성을 취소하거나 위치 지정 속성을 설정하지 않는 것과 같습니다.
- inherit는 상위 요소에서 위치 속성 값을 상속합니다.
위치 지정 요소 절대 위치 및 고정 위치인 블록 요소와 선 요소는 자동으로 내부 블록 요소로 변환됩니다.
위치 지정 요소 수준
위치 지정 요소는 부동 요소 계층 구조의 일반적인 문서 흐름 위에 있습니다.
일반적인 위치 레이아웃

1. 상단에 고정된 메뉴 2. 가로 및 세로 중앙에 팝업 상자 3. 고정된 측면 도구 모음 4. 하단에 고정된 버튼

배경 속성

속성 설명
The 배경 속성은 CSS에서 일반적으로 사용되는 중요한 속성으로 상자의 배경 이미지와 배경 색상을 설정합니다. 배경은 다음과 같은 설정으로 분류될 수 있습니다. color 배경색 설정

background-image 배경 이미지 주소 설정
- background-repeat 배경 이미지의 반복 타일링 방식 설정
- background-position 배경 이미지 위치 설정
- background-attachment 배경 이미지를 고정할지, 페이지 스크롤바로 스크롤할지 설정
- 실제 응용에서는 background 속성을 사용하여 위의 모든 설정 항목을 하나로 묶을 수 있는데 그렇게 하는 것도 권장되는 부분입니다. 성능이 더 좋고 호환성이 더 좋습니다. 예: "배경: #00FF00 url(bgimage.gif) 반복 없음 왼쪽 가운데 고정", 여기서 "#00ff00"은 배경색을 설정하는 것입니다. "url(bgimage.gif; )"는 배경 이미지 설정, "no-repeat"는 배경 반복 설정, "왼쪽 중앙"은 배경 위치 설정, "fixed"는 배경 첨부 설정입니다. 각 설정 항목은 공백으로 구분됩니다. 일부 설정 항목은 기록되지 않습니다. 기본값을 사용합니다.
- 다음 예에서는 다음 이미지를 배경 이미지로 사용합니다.
1. "배경:url(bg.jpg)"은 기본적으로 이미지 주소를 설정합니다. image 상자의 왼쪽 상단부터 상자가 채워집니다.

2. "배경:청록색 url(bg.jpg) 반복-x", 상자를 수평으로 타일링하고 상자의 다른 부분은 배경색 "청록색"을 표시합니다.

3、“background:cyan url(bg.jpg) repeat-y”，纵向平铺盒子，盒子其他部分显示背景颜色“cyan”。

4、“background:cyan url(bg.jpg) no-repeat”，背景不重复，背景和盒子左上角对齐，盒子其他部分显示背景颜色“cyan”

5、“background:cyan url(bg.jpg) no-repeat left center”，背景不重复，背景和盒子左中对齐，盒子其他部分显示背景颜色“cyan”。

6、“background:cyan url(bg.jpg) no-repeat right center”，背景不重复，背景和盒子右中对齐，也就是背景图片的右边对齐盒子的右边，盒子其他部分显示背景颜色“cyan”。

相关代码：
```
nbsp;html>


    <meta>
    <title>test background</title>
    <style>
 .backshow{
 width:320px;
 height:160px;
 border:3px solid #333;
 float:left;
 margin:10px; 
 }
 .bg1{background:cyan url(bg.jpg);}
 .bg2{background:cyan url(bg.jpg) repeat-x;}
 .bg3{background:cyan url(bg.jpg) repeat-y;}
 .bg4{background:cyan url(bg.jpg) no-repeat;}
 .bg5{background:cyan url(bg.jpg) no-repeat left center;}
 .bg6{background:cyan url(bg.jpg) no-repeat right center;}
 </style>


    
    
    
    
    
    
```
例子说明：
代码中使用到的背景图片，可以直接在页面上的背景图片上点右键另存下来，命名为：“bg.jpg”，并且和网页文件存在同一个目录下。

关于背景图片的background-position的设置，设置背景图片水平位置的有“left”、“center”、“right”，设置背景图片垂直位置的有“top”、“center”、“bottom”，水平和垂直的属性值两两组合，就可以把背景图设置到对齐盒子的四个角或者四个边的中心或者盒子的正中心位置。还可以设置具体的像素值来把背景图片精确地定位到盒子的某个位置，特别是对于背景图片尺寸大于盒子尺寸的这种情况，我们可以用数值定位，截取大图片的某一块做为盒子的背景。

比如说，我们想把下边的盒子用右边的图片作为背景，并且让背景显示图片中靠近底部的那朵花：

用上面中间那张图片作为左边那个比它尺寸小的盒子的背景，如果不设置background-position，默认背景图的左上角会和盒子的左上角对齐，如果设置，可以用两个数值定位背景图，上面右边的实现效果设置为：“background:url(location_bg.jpg) -110px -150px”，第一个数值表示背景图相对于自己的左上角向左偏移110px，负值向左，正值向右，第二个数值表示背景图相对于自己的左上角向上偏移150px，负值向上，正值向下。

实现原理示意图：

对应代码：
```
nbsp;html>


    <meta>
    <title>test background</title>
    <style>
 .backshow{
 width:320px;
 height:160px;
 border:3px solid #333;
 float:left;
 margin:10px; 
 } 
 .bg{width:94px;
 height:94px;
 border:3px solid #666;
 background:url(location_bg.jpg) -110px -150px;
 }
 </style>


    
```