day15 web前端之css

css的概念以及初体验

概念：

CSS（cascading style sheet）也就是层叠样式表；它是一种网页设计的新技术，现在已经被大多数浏览器所支持，层位网页设计必不可少的工具之一。
优点：
    使得网页代码更少，网页下载速度更快
    实现了内容和样式的分离，使得网站维护更加便捷
    使得网站和浏览器兼容更好

css的编写方式

• css的语法结构

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明:

在css的三个组成部分中，对象是很重要的，他指定了对那些网页元素进行设置，因此他有一个专门的名称---选择器

• 行内样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="color: red;font-size: 30px">这是css的初体验</div>
</body>
</html>

• 内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            font-size: 29px;
            color: green;
        }
    </style>
</head>
<body>
    <div>css的初体验2</div>
</body>
</html>

• 各种选择器
• id选择器：ID选择器的id一定要唯一，千万别重复

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        /*标签选择器*/
        div{
            font-size: 29px;
            color: green;
        }
        /*id选择器*/
        #two{
            font-size: 50px;
            color:red;
        }
        span{
            color: yellow;
        }
        .three{
            /*类选择器*/
            color: deeppink;
        }
        .four span{
            /*包含选择器*/
            color: aquamarine;
            font-size: large;
        }
        div,span,h2{
            /*分组选择器*/
            color: #3300cc;
        }
        *{
            /*通用选择器*/
            background-color: green;
            color: #000;
        }
    </style>
</head>
<body>
    <div>css的初体验2</div>
    <div id="two">css的初体验2</div>
    <div class="three">css的初体验2</div>
    <div class="three">css的初体验3</div>
    <span>spawn标签</span>
`   <div class="four">
        <span>这是css里的spawn标签</span>
    </div>
    <h2>h2元素</h2>
    <input type="text">
</body>
</html>

• 选择器的优先级：行内选择器>id选择器>类选择器>标签选择器>通用选择器

测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #show1{color:yellow}
        .show{color:pink}
        h1{color: red}
        *{color:green}
    </style>
</head>
<body>
    <h1 id="show1" class="show" >这是选择器优先级设置</h1>
</body>
</html>

• 外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="a.css">
    <style type="text/css">
    </style>
</head>
<body>
    <div>css的初体验2</div>
        <div id="two">css的初体验3</div>
        <div class="three">css的初体验3</div>
        <div class="three">css的初体验3</div>
        <span>spawn标签</span>
    `   <div class="four">
        <span>这是css里的spawn标签</span>
    </div>
    <h2>h2元素</h2>
    <input type="text">
</body>
</html>

css样式文件如下：

#show1{color:yellow}
.show{color:pink}
h1{color: red}

css的基本属性

• 文字、段落、背景属性

css的布局属性

浏览器兼容性问题