码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式表知识总结

时间:2018-08-10 01:34:11      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:code   width   base   第一个   逗号   伪类   yii   image   ext   

技术分享图片

 

技术分享图片

 

分类

|------内联 写在标签里面,控制精确,代码重用性差

|---------style=样式

<div style="background: yellow; width: 100px; height: 100px;"></div>
        <div style="background: red; width: 100px; height: 100px;"></div>

技术分享图片

 

|------内嵌 嵌在页面的<head></head>里,控制没有内联的精确,代码重用性好

|---------<style type="text/css"></style>

<style>
            #first{background: pink; width: 200px; height: 100px;}
            #second{background: blue; width: 200px; height: 100px;}
        </style>
<div id="first">
            
        </div>
        <div id="second">
            
        </div>

技术分享图片

 

|------外部 单独的样式文件,控制没有内联的精确,代码重用性最好

|---------<link href="" rel="stylesheet" type="text/css"/>

#third{
    background: purple;
    width: 200px;
    height: 300px;
}
<link rel="stylesheet" href="1111.css" />
<div id="third">
            
        </div>

技术分享图片

选择器  样式表用来选取元素 标签:根据标签名选中元素

|------class

|---------.点

|---------根据class名来筛选元素

|---------可以有重复的名字

.common{
            width: 100px;
            height: 100px;
            background-color: black;
            color: white;
        }
        .common:hover{
            background-color: red;
            color: black;
<div class="common">
            我是第一个common
        </div>
        <div class="common">
            我是第二个common
        </div>
        <div class="common">
            我是第三个common
        </div>

技术分享图片

 

|------id

|---------#

|---------根据id名来筛选唯一的元素

|---------不能有重复的名字

#third{
              width: 100px;
              height: 100px;
              background-color: green;
          }
<div id="third">
            
        </div>

技术分享图片

 

|------复合

|---------逗号:并列   div,span

|---------空格:后代   #list li

|---------大于号:子元素选择器   div>p  div中所有p标签

div,p{
            border: 1px solid red;
            
        }
        #third,#fourth{
            border: 1px solid black;
        }
        #first_ul li{
            color:brown;
        }
        #second_ul li{
            color: darkblue;
        }
        #div_p>p{
            color: green;
        }
<div id="third">
            
        </div>
        <div id="fourth">
            
        </div>
<ul id="first_ul">
            <li>无序一</li>
            <li>无序一</li>
            <li>无序一</li>
        </ul>
        <ul id="second_ul">
            <li>无序二</li>
            <li>无序二</li>
            <li>无序二</li>
        </ul>
        <div id="div_p">
            <p>我是div中的第一行p元素</p>
            <p>我是div中的第二行p元素</p>
            <p>我是div中的第三行p元素</p>
            <div>我是div中的第四行div元素</div>
        </div>

技术分享图片

|------属性选择器

|---------[属性名 = 属性值]{}   属性名后边可以加 |、*等 代表匹配所有属性有属性值的元素

|---------表单元素的属性选取

[href="aa.html"]{
            color: red;
        }
        input[type="text"]{
            background-color: gainsboro;
        }
<a href="aa.html">跳转</a>
        <input type="text" name="" id="" value="" /><br />
        <input type="password" name=""id=""value="" />

技术分享图片

|------伪类

|---------a标签的四个伪类

|------------a:link 未访问的链接

|------------a:visited  已访问的链接

|------------a:hover  鼠标划过链接

|------------a:active  已选中的链接

a:link{
            color:red
        }
        a:visited{
            color: black;
        }
        a:hover{
            color: blue;
        }
        a:active{
            color: yellow;
        }
<a href="https://www.baidu.com">跳转到百度</a>

 技术分享图片技术分享图片

 技术分享图片技术分享图片

 

CSS样式表知识总结

标签:code   width   base   第一个   逗号   伪类   yii   image   ext   

原文地址:https://www.cnblogs.com/q-1234/p/9452075.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!