前端——CSS1

一，概述

CSS（Cascading Style Sheets）（級聯樣式表）

css是一種樣式表語言，為html標簽修飾定義外觀，分工不同

涉及：對網頁的文字、背景、寬、高、布局進行修飾

分為內嵌樣式表（平常練習時使用）和外部樣式表（制定網頁時使用，將css與html網頁分離）

CSS與HTML的關系:

HTML是網頁內容

CSS定義頁面的樣式

二，基本語法——行內樣式表

1.樣式表：

（1）行內樣式表

行內樣式表：是通過標簽的 style 屬性來設置元素的樣式，其基本語法格式如下：
< 標簽名 style=" 屬性 1: 屬性值 1; 屬性 2: 屬性值 2; 屬性 3: 屬性值 3;"> 內容 </ 標簽名 >

（2）內嵌樣式表

內嵌式樣式表是將 CSS 代碼集中寫在 HTML 文檔的 head 頭部標簽中，并且用 style 標簽定義
<html>
<head>
<title> 樣式規則 </title>
將內嵌樣式表放在此處
<style></style>
</head>
<body>
</body>
</html>

（3）外部樣式表

外部樣式表是將所有的樣式放在一個或多個以 .CSS 為擴展名的外部樣式表文件中，通
過 link 標簽將外部樣式表文件鏈接到 HTML 文檔中
使用link（鏈接）標簽 :
<head>
<link href="引入樣式的文件" rel="stylesheet " type=" text /css">
<style type=" text /css">
</style>

2.選擇器:

（1）標簽選擇器：

通過標簽選擇器可以選擇頁面中的所有指定標簽
語法：標簽名 {}

（2）類選擇器：

通過標簽的 class 屬性值選中一組標簽
語法： .class 屬性值 {}

（3）id 選擇器：

通過標簽的 id 屬性值選中唯一的一個標簽
語法： #id 屬性值 {}

（4）通配選擇器 :

可以用來選中頁面中的所有的標簽
語法： *{}

3.文本修飾:

color ：字體顏色
font-size ：字體大小
font-family ：字體
text-align ：文本對齊
text-decoration:line-through ：定義穿過文本下的一條線
text-decoration:underline ：定義文本下的一條線
text-decoration:none ：定義標準的文本
font-style: italic; 斜體文本
font-weight: 字體粗細
line-height: 設置行高

4.背景修飾:

background-color:背景顏色
background-image 背景圖片
background-repeat 背景重復
background-size 背景尺寸
background- position 背景位置

5.CSS的列表屬性

CSS 列表屬性可以放置、改變列表項標志，或者將圖像作為列表項標志。
list-style-image ：將圖象設置為列表項標志。
list-style-position ：設置列表中列表項標志的位置。
list-style-type ：設置列表項標志的類型。
list-style： ?簡寫屬性。

6.CSS偽類

CSS偽類專門用來表示標簽的一種的特殊的狀態，當我們需要為處在這些特殊狀
態的標簽設置樣式時，就可以使用偽類。

（1）偽類的語法：

:hover偽類表示鼠標移入的狀態
:active表示的是被點擊的狀態
:focus向擁有鍵盤輸入焦點的標簽添加樣式。

（2）透明度

定義透明效果的屬性是 opacity 。
opacity 屬性設置標簽的不透明級別值為 1 。
規定不透明度：從 0.0 （完全透明）到 1.0 （完全不透明）。

7.塊級,行級,行級塊標簽

（1）塊級標簽

無論內容多少都會獨自占據一行的，可以進行修飾。
例如<p>、<h1>、<ul>、<ol>、<hr/>等。

（2）行級標簽

只占自身大小的標簽，不會占一行，但是不能進行修飾。
例如<font>、<b>、<i>、<a>等。

（3）行塊級標簽

不會獨自占一行，但是可以進行修飾。
例如 <input/> <img>等

8.Display

通過 display 樣式可以修改標簽的類型。
block ：設置標簽為塊標簽
inline ：設置標簽為行級標簽
inline-block ：設置標簽為行級塊標簽

9.div和span

（1）div 標簽

div 是塊級標簽，可以放置任何標簽。
div 沒有任何附加功能，給了什么屬性就能變成什么樣。
div 主要的作用是被用來布局網頁。

（2）span 標簽

span 是行級標簽
span 沒有任何附加功能，給了什么屬性就能變成什么樣。
span 標簽被用來選中文檔中的文字。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/77804.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/77804.shtml
英文地址，請注明出處：http://en.pswp.cn/web/77804.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！