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学习（二）基本类型