HTML/CSS基礎與介紹

時間 2019-12-05

標籤 html css 基礎介紹欄目 HTML 简体版

原文原文鏈接

CSS介紹css

CSS是指層疊樣式表，CSS樣式表極大的提升了工做效率html

CSS基礎語法
1. 首先選擇一個屬性
2. 選擇了屬性之後，用大括號括起來
3. 括號裏面是對應的屬性和屬性值，如：學習

selector {htm

property: value;utf-8

}it

舉一個實際的例子，就像這樣：class

h1是屬性，而後一個大括號，括號中的color是屬性，後面跟着對應的屬性值red，設置結束後須要用;來分別各個屬性test

h1 {效率

color: red;基礎

font-size: 14px;

}

使用CSS樣式：

須要在html中來使用CSS樣式，能夠用<link>標籤來調用CSS文件，如：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>我被CSS改變了。</h1>

</body>

</html>

CSS選擇器分組：

選擇器分組就是將一堆頁面元素，一塊兒定義：

h1, h2, h3, p, a{

color: red;

font-size: 14px

}

CSS派生類選擇

根據元素在其位置的上下文關係來定義樣式，就好比標籤中的標籤，若是直接定義body元素，就會把其中全部的值都改變，可是單單針對某些元素來定義，也是能夠的。固然針對一個元素定義的樣式的優先級，要比定義<body>所有樣式的優先級高。因此即便是<body>修改了樣式，也能夠針對單個元素進行修改。

以下代碼：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>我是小p，我是body p{}指定的標籤改變的</p>

</body>

</html>

而後咱們用CSS樣式來修改

body{

color: green;

}

body p{

color: red;

}

能夠看到，將body所有定義成綠色了，可是若是指定body中的p元素進行定義，仍是能夠將其改變顏色的。因此指定的元素的優先級要比所有定義的高。相反沒有指定定義的h1標題，就是綠色。

ID選擇器

id選擇器能夠爲標有id的HTML元素指定特定的樣式，id選擇器以「#」來定義。id選擇經常用於簡歷派生選擇器，他們常常一塊兒來使用

<!DOCTYPE html>

<html>

<head>

</head>

<body>

呵呵呵呵

<p>哈哈哈，我被指定定義了顏色，id與元素常常一塊兒使用！</p>

</div>

</body>

</html>

/*id能夠直接用#號來表示*/

#testid{

color: green;

}

#testid p{

color: red;

}

CSS類選擇器

類選擇器是以一個點「.」來顯示的，class也能夠結合派生選擇器來一塊兒使用，好比定義了一個元素<div class="testclass">

利用CSS能夠以下修改：

/*class能夠須要用「.」來表示*/

.testclass{

color: green;

}

.testclass p{

color: red;

}

屬性選擇器：

屬性選擇器就是針對標籤中的屬性來進行修改，固然，也能夠根據屬性的值，來針對性的修改：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<li>屬性選擇器</li>

</ol>

<li>屬性選擇器</li>

</ol>

<li>屬性選擇器</li>

</ol>

</body>

</html>

而後用CSS來修改

/*若是沒有值，經過屬性修改所有的樣式*/

[type]{

color: red;

}

/*有值的話，就是針對值進行修改*/

[type="a"]{

color: green;

}

總結：

主要學習了CSS的用法，已經派生選擇器的使用，id選擇器的使用，class選擇器的使用和屬性選擇器的使用

id---以「#」開頭

class---以「.」開頭

屬性選擇器---以[]在括號類填寫屬性和值

派生選擇器---直接調用標籤，如：<p>{}

1. HTMLCSS學習之CSS基礎
2. Cookie與Session基礎介紹
3. Hbase--基礎介紹
4. phpstudy基礎介紹
5. vuex 基礎介紹
6. Javaweb基礎介紹
7. java基礎介紹
8. HTML基礎介紹
9. python基礎介紹
10. Ansible 基礎-介紹
更多相關文章...
• Spring目錄結構和基礎JAR包介紹 - Spring教程
• Kotlin 基礎語法 - Kotlin 教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用
• Kotlin學習（二）基本類型

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。