day15 web前端之css

css的概念以及初体验

概念：

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

css的编写方式

  • css的语法结构

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

           image

在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的布局属性

 

 

 

 

浏览器兼容性问题

posted @ 2017-02-13 18:23  valiente  阅读(128)  评论(0)  编辑  收藏  举报