css中美化網頁的元素有哪些？ css中可以美化網頁的元素總結-css教學-PHP中文網

首頁

web前端

css教學

css中美化網頁的元素有哪些？ css中可以美化網頁的元素總結

不言

Aug 24, 2018 am 09:56 AM

這篇文章帶給大家的內容是關於css中美化網頁的元素有哪些？ css中可以美化網頁的元素總結，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

1.本章目標

會使用CSS設定字型樣式和文字樣式

會使用CSS設定超連結樣式

會使用CSS設定清單樣式

會使用CSS設定背景樣式

會使用CSS設定漸變效果

2.標籤

#標籤的作用

能讓某幾個文字或某個字詞凸顯出來

範例：

<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.字體大小

font-size屬性

單位： px（像素）、em、rem、cm、mm、pt、pc

6.字體風格

#font-style屬性

normal、italic(庫裡自帶的)和oblique(自動將字體變斜體)

範例：

7.字體的粗細

#font-weight屬性

8.字型屬性

#font屬性##family weight size ##style

##字體屬性的順序：字體風格→字體粗細→字體大小→字體類型##p span

{font:oblique bold 12px 「楷體";}

9.文字樣式

文字屬性

#10.文本顏色

color屬性

RGB

十六進位方法表示顏色：前兩位表示紅色分量，中間兩位表示綠色分量，最後兩位表示藍色分量

rgb(r,g,b) : 正整數的取值為0～255

RGBA在RGB基礎上增加了控制alpha透明度的參數，其中這個透明通道值為0～1

範例：

color:#A983D8;
color:#EEFF66;
color:rgb(0,255,255);--------------最深的颜色
color:rgba(0,0,255,0.5);-----------透明度

######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 id="线性渐变-nbsp-nbsp-头部到底部">线性渐变 - 头部到底部</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

揭開屏幕讀取器的神秘面紗：可訪問的表格和最佳實踐Mar 08, 2025 am 09:45 AM

這是我們在形式可訪問性上進行的小型系列中的第三篇文章。如果您錯過了第二篇文章，請查看“以：focus-visible的管理用戶焦點”。在

使用智能表單框架創建JavaScript聯繫表格Mar 07, 2025 am 11:33 AM

本教程演示了使用智能表單框架創建外觀專業的JavaScript表單（注意：不再可用）。儘管框架本身不可用，但原理和技術仍然與其他形式的建築商相關。

將框陰影添加到WordPress塊和元素Mar 09, 2025 pm 12:53 PM

CSS盒子陰影和輪廓屬性獲得了主題。讓我們查看一些在真實主題中起作用的示例，以及我們必須將這些樣式應用於WordPress塊和元素的選項。

使用GraphQL緩存Mar 19, 2025 am 09:36 AM

如果您最近開始使用GraphQL或審查了其優點和缺點，那麼您毫無疑問聽到了諸如“ GraphQl不支持緩存”或

使您的第一個自定義苗條過渡Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一種使組件輸入或離開文檔（包括自定義Svelte Transitions）時動畫組件的方法。

比較5個最佳的PHP形式構建器（和3個免費腳本）Mar 04, 2025 am 10:22 AM

本文探討了Envato Market上可用的PHP表單構建器腳本，比較了其功能，靈活性和設計。在研究特定選項之前，讓我們了解PHP形式構建器是什麼以及為什麼要使用一個。 PHP形式

展示，不要說Mar 16, 2025 am 11:49 AM

您花多少時間為網站設計內容演示文稿？當您撰寫新的博客文章或創建新頁面時，您是在考慮

NPM命令是什麼？Mar 15, 2025 am 11:36 AM

NPM命令為您運行各種任務，無論是一次性或連續運行的過程，例如啟動服務器或編譯代碼。

See all articles

熱AI工具

熱工具

mPDF是一個PHP庫，可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件，並處理不同的語言。與原始腳本如HTML2FPDF相比，它的速度較慢，並且在使用Unicode字體時產生的檔案較大，但支援CSS樣式等，並進行了大量增強。支援幾乎所有語言，包括RTL（阿拉伯語和希伯來語）和CJK（中日韓）。支援嵌套的區塊級元素（如P、DIV），