>  기사  >  웹 프론트엔드  >  웹 페이지를 아름답게 만드는 CSS 요소는 무엇입니까? 웹페이지를 아름답게 만드는 CSS 요소 요약

웹 페이지를 아름답게 만드는 CSS 요소는 무엇입니까? 웹페이지를 아름답게 만드는 CSS 요소 요약

不言
不言원래의
2018-08-24 09:56:102568검색

이 글의 내용은 웹 페이지를 아름답게 만드는 CSS 요소에 관한 것입니다. 웹 페이지를 아름답게 할 수 있는 CSS 요소 요약은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1.이 장의 목표 #🎜 🎜#

CSS를 사용하여 글꼴 스타일과 텍스트 스타일 설정

CSS를 사용하여 하이퍼링크 스타일 설정

CSS를 사용하여 목록 스타일 설정 #🎜 🎜##🎜 🎜# CSS를 사용하여 배경 스타일을 설정합니다

CSS를 사용하여 그라데이션 효과를 설정합니다

2.0e87d2edada7a9a8e00bee69c2496293 태그

# 🎜🎜#45a2772a6b6107b401db3c9b82c049c2태그의 역할은 특정 단어나 단어를 돋보이게 할 수 있습니다

#🎜🎜 #

예:

<p>享受<span class="show">“北大式”</span>教育服务</p>
<p>在php中文网,有一群人默默支持你成就
      <span id="dream">梦想</span></p>
<p class="bird">选择<span>php中文网</span>,成就你的梦想</p>
3 글꼴 스타일

#🎜 🎜##🎜🎜 #

4. 글꼴 유형

font-family 속성

p{font-family:Verdana,"楷体";}
body{font-family: Times,"Times New Roman", "楷体";}
5. 글꼴 크기

글꼴 크기 속성

단위 : px(픽셀), em, rem, cm, mm, pt, pc

6. 🎜🎜##🎜 🎜#

font-style attribute

normal, italic(라이브러리에서 가져옴) 및 oblique(자동으로 글꼴을 기울임꼴로 변경)

# 🎜🎜# 예:

                                               🎜🎜## 🎜🎜#7. 글꼴 두께

# 🎜🎜#

글꼴 가중치 속성#🎜 🎜#

#🎜 🎜 #

8. 글꼴 속성

FONT 속성#### 🎜🎜 ## 🎜🎜##🎜🎜 # # 🎜🎜#

#🎜🎜 ## 🎜🎜#가족#🎜🎜 ## 🎜🎜 #

## 🎜🎜#weight### ## ################### ########################## 🎜🎜#

style

글꼴 속성 순서: 글꼴 스타일→글꼴 두께→글꼴 크기→글꼴 유형

#🎜 🎜#p 범위 # 🎜🎜#{font:oblique 굵은 12px "楷体";}#🎜🎜 #9. 텍스트 속성#🎜🎜 # 10. 텍스트 색상 # 🎜🎜#colorattributeRGB 16진수 방법은 색상을 나타냅니다. 처음 두 자리는 빨간색 구성 요소를 나타내고, 가운데 두 자리는 녹색 구성 요소를 나타내고, 마지막 두 자리는 파란색을 나타냅니다. Componentrgb(r,g,b): 값 양의 정수는 0~255입니다RGBA

은 알파 투명도를 제어하는 ​​RGB 매개변수를 기반으로 추가되며 이 투명 채널의 값은 0~1입니다. # 🎜🎜#

11. 텍스트 단락 서식 지정

12.文本修饰和垂直对齐

文本装饰

text-decoration属性

垂直对齐方式

vertical-align属性:middle、top、bottom

13.文本阴影

浏览器兼容性

14.超链接伪类

15.使用CSS设置超链接

16.列表样式2-1

list-style-type

list-style-image

17.列表样式2-2

   list-style:
li {
list-style:none;
}

1、网页背景

R红--G绿--B蓝

背景颜色

background-color

背景图像

background-image

19.设置背景图像2-1

背景图像

background-image属性

background-image:url(图片路径);

背景重复方式

background-repeat属性

repeat:沿水平和垂直两个方向平铺

no-repeat:不平铺,即只显示一次

repeat-x:只沿水平方向平铺

repeat-y:只沿垂直方向平铺

20.设置背景图像2-2

背景定位

 background-position属性

21.设置背景

  背景属性

background属性

23.背景尺寸

背景尺寸 background-size

24.CSS3渐变

线性渐变

颜色沿着一条直线过渡:从左到右、从右到左、从上到下等

径向渐变

圆形或椭圆形渐变,颜色不再沿着一条直线变化,而是从一个起点朝所有方向 混合

浏览器兼容性

25.CSS3渐变兼容

IE浏览器是Trident内核,加前缀:-ms-

Chrome浏览器是Webkit内核,加前缀:-webkit-

Safari浏览器是Webkit内核,加前缀:-webkit-

Opera浏览器是Blink内核,加前缀:-o-

Firefox浏览器是Mozilla内核,加前缀:-moz-

26.线性渐变

左上向右下方向渐变:linear-gradient( left top ,red, blue)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#grad1 {
    height: 200px;
    background: -webkit-linear-gradient(red,yellow,blue); /* Safari 5.1 to 6.0 */
    background: -o-linear-gradient(red,yellow,blue); /* Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(red,yellow,blue); /* Firefox 3.6 to 15 */
    background: linear-gradient(red,yellow,blue); /* 标准语法 (必须在最后) */
}
</style>
</head>
 
<body>
<h3>线性渐变 - 头部到底部</h3>
<p>从头部开始的线性渐变,从红色开始,转为黄色,再到蓝色:</p>
 
<div id="grad1"></div>
 
<p><strong>注意:</strong> Internet Explorer 9 及更早版本 IE 浏览器不支持渐变。</p>
</body>
</html>

总结

相关推荐:

CSS3如何实现全景图的动画效果(附代码)

如何使用纯CSS3实现图片轮播的效果

위 내용은 웹 페이지를 아름답게 만드는 CSS 요소는 무엇입니까? 웹페이지를 아름답게 만드는 CSS 요소 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.