CSS基礎介紹

時間 2019-12-04

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

原文原文鏈接

CSS介紹css

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

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

selector {
    property: value;
}

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

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

h1 {
    color: red;
    font-size: 14px;
}

使用CSS樣式：htm

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

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!-- 調用CSS樣式表 -->
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
        <h1>我被CSS改變了。</h1>
    </body>
</html>

CSS選擇器分組：utf-8

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

h1, h2, h3, p, a{
    color: red;
    font-size: 14px
}

CSS派生類選擇it

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

以下代碼：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!-- 調用CSS樣式表 -->
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <!-- 標籤中的標籤 -->
    <body>
            <p>我是小p，我是body p{}指定的標籤改變的</p>
            <h1>我是標題</h1>
    </body>
</html>

而後咱們用CSS樣式來修改

body{
    color: green;
}
body p{
    color: red;
}

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

ID選擇器

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

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="utf-8">
        <!-- 調用CSS樣式表 -->
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
            <div id="testid">
                呵呵呵呵
                <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>
        <title></title>
        <meta charset="utf-8">
        <!-- 調用CSS樣式表 -->
        <link rel="stylesheet" type="text/css" href="test.css">
    </head>
    <body>
            <ol type="I">
                <li>屬性選擇器</li>
                <li>屬性選擇器</li>
                <li>屬性選擇器</li>
            </ol>

            <ol type="1">
                <li>屬性選擇器</li>
                <li>屬性選擇器</li>
                <li>屬性選擇器</li>
            </ol>

            <ol type="a">
                <li>屬性選擇器</li>
                <li>屬性選擇器</li>
                <li>屬性選擇器</li>
            </ol>
    </body>
</html>

而後用CSS來修改

/*若是沒有值，經過屬性修改所有的樣式*/
[type]{
    color: red;
}

/*有值的話，就是針對值進行修改*/
[type="a"]{
    color: green;
}

總結：

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

id---以「#」開頭

class---以「.」開頭

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

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

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

相關標籤/搜索

每日一句

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