CSS 예제 모든 것

CSS 텍스트

• 텍스트 색상 설정하기

• 텍스트 정렬

• 텍스트 인덱싱

• 텍스트 장식

• 문자 간 간격 설정하기

• 단어 간 간격 설정하기

• 텍스트 줄 간격 설정하기

• 공백과 줄 바꿈 문자 유지하기

• 요소 내의 텍스트 줄 바꿈

• 텍스트 내에 이미지의 수직 정렬

CSS 폰트

• 텍스트의 폰트 설정하기

• 폰트 크기 설정하기

• 폰트 스타일 설정하기

• 폰트의 변종 설정하기

• 폰트의 굵기 설정하기

• 단일 선언에서 모든 폰트 속성 설정하기-폰트 약자 속성

CSS 링크

• 링크 다른 상태의 스타일 설정하기

• 링크에서 기본 밑줄 제거하기

• 링크에서 실선 테두리 제거하기

• 링크 상자 만들기

• 이미지 뒤집기

CSS 목록

• 목록에서 항목 목차와 숫자를 지정하기

• 목록 항목 표시기 위치 설정하기

• 이미지를 목록 항목 표시기로 설정하기

• 단순한 드롭다운 메뉴를 만들기

• 在单个声明中设置所有列表属性-列表样式的简写属性

CSS表

• 设置表格的边框

• 指定表格的尺寸

• 通过折叠表格边框来创建更好的表格

• 设置表格单元格内文本的水平对齐方式

• 设置内容的垂直对齐

• 指定应如何显示空单元格

• 指定表格单元格的填充

• 指定表布局算法-自动或固定

• 设置表格标题的位置

CSS背景

• 设置元素的背景色

• 将图像设置为元素的背景

• 水平或垂直重复背景图像

• 指定背景图片的位置

• 固定的背景图片，不会与其包含的元素一起滚动

• 一次设置所有背景属性-背景速记属性

• 设置背景图像的尺寸

• 设置背景裁剪

• 设置背景原点

• 向元素添加多个背景

CSS单位

• 使用绝对单位（例如px，pt，cm等）

• 使用相对单位（例如，em，ex，％等）

CSS尺寸

• 设置元素的宽度和高度

• 设置元素的最大宽度和高度

• 设置元素的最小宽度和高度

• 控制溢出

CSS对齐

• 文本和内嵌元素在块级元素内的对齐

• 使用边距属性对块元素进行中心对齐

• 使用float属性水平对齐元素

• 使用position属性在水平和垂直方向上对齐元素

• 防止父项与clear属性崩溃

• 创建一个简单的水平菜单

CSS定位

• 相对于浏览器窗口放置元素

• 相对于其父元素定位元素

• 相对于其正常位置定位元素

• 使用z-index属性重叠元素

CSS显示

• 使用可见性属性隐藏元素

• 使用display属性从DOM中删除元素

• 将元素显示为嵌入式元素

• 将元素显示为块元素

• 折叠表格元素

CSS边框和轮廓

• 在元素周围绘制边框

• 在元素的各个边上绘制边框

• 为边框设置不同的样式

• 一次设置所有边框属性-边框速记属性

• 在元素周围创建圆角

• 使用图像创建边框

• 在元素周围绘制轮廓

• 在元素周围绘制边框而不影响周围的元素

CSS边距和填充

• 设置元素各边的边距

• 在单个声明中设置所有边距属性-边距速记属性

• 设置元素各个边的填充

• 一次设置所有填充属性-填充速记属性

CSS不透明度

• 设置元素的透明度

• 图像翻转效果和透明度

• 透明框中的文字

CSS生成的内容

• 指定引号

• 自动编号的部分和类别

• 使用CSS插入生成的内容

CSS伪类

• 为超链接的不同状态设置样式

• 使用：focus伪类为焦点中的表单元素设置样式

• use :first-child伪类用于设置元素的第一个子元素的样式

• use :first-childpseudo클래스는 요소의 마지막 자식 요소에 스타일 설정

• use :nth-childpseudo클래스는 요소의 nth를 설정-child 스타일 설정

• 특정 언어에 스타일 설정하기 위해 :lang()pseudo클래스 사용

• pseudo클래스와 선택자를 함께 사용

CSS伪요소

• use:: first-letter伪요소로 머리글下沉 효과 생성

• use:: first-line伪요소로 텍스트의 첫 번째 행을 다른 방식으로 설정

• 요소 앞이나 뒤에 내용 추가하기 위해 ::before 또는 ::after伪요소 사용

• 클래스에서伪요소 사용

CSS3그래디언트

• 위쪽에서 아래쪽으로 선형 그래디언트 생성

• 왼쪽에서 오른쪽으로 선형 그래디언트 생성

• 대각선으로 선형 그래디언트 생성

• 각도로 선형 그래디언트 방향 설정

• 여러 색상 표시기로 선형 그래디언트 생성

• 선형 그래디언트 생성 시 색의 위치 정지 설정

• 반복적 선형 그래디언트

• 계단형径向 그래디언트 생성

• 계단형径向 그래디언트 형상 설정

• 계단형径向 그래디언트 크기 설정

• 반복적径向 그래디언트

• 계단형 그래디언트에 투명도 사용

CSS3그림자

• 박스 그림자 효과 생성

• 요소의 박스 그림자에 여러 박스 그림자 추가

• 문자 그림자 효과 생성

CSS3 2D 변환

• translate() 메서드 사용하여 요소를 이동

• rotate() 메서드 사용하여 요소를 회전

• scale() 메서드 사용하여 요소 크기를 확대 또는 축소

• matrix() 메서드 사용2D 변환

• 요소에 다중 변환 적용

CSS3 3D 변환

• translate 사용3d() 메서드를 사용하여 3차원 공간에서 요소를 이동

• rotate 사용3d() 메서드를 사용하여 3차원 공간에서 요소를 회전

• scale 사용3d() 메서드를 사용하여 3차원 공간에서 요소를 확대

• matrix 사용3d() 메서드 적용3D 변환

• 여러 가지를3D 변환 요소에 적용

CSS3트랜지션

• 배경색에 트랜지션 효과 적용

• 여러 속성에 트랜지션 효과 적용

• 모든 트랜지션 속성 한 번에 설정-트랜지션 약자 속성

CSS3애니메이션

• 웹 페이지上的 애니메이션 요소

• 애니메이션 생성 시 키 프레임 정의

• 모든 애니메이션 속성 한 번에 설정-애니메이션 약자 속성

CSS3다중 행 레이아웃

• 다중 행 레이아웃 생성

• 행 수 또는 너비 설정

• 행 사이 간격 설정

• 행 사이에 라인 또는 수직선 추가