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

css基础知识

时间:2018-09-18 19:02:44      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:margin   lov   隐藏元素   round   另一个   添加   width   inpu   src   

通配符选择器(用来重置网页样式)**

  *{

  padding:0;

  margin:0;

}

ul标签去除圆圈  list-style:none;

a标签去除下划线  text-decoration:none;

<p id="q1" class="lg lv" >清风</p> #可以给一个标签去多个类名

1.高级选择器

  后代选择器 ***** 

    可以是儿子、孙子.....

技术分享图片
 .father ul li p {
            color:red;
        }
View Code

  子代选择器

    只能是儿子

技术分享图片
.father>p{
     color: red;
}
.father>ul>li{
     color: red;
}
View Code

  组合选择器

    多个选择器组合到一起共同设置样式

    div,p,a,li,span{

      font-size:14px;

}

  交集选择器

技术分享图片
        div.active{
            color: red;
        }
View Code

  属性选择器

    input[type="text"]

技术分享图片
        form input[type="text"]{
            background-color: red;
        }
        form input[type="password"]{
            background-color: yellow;
        }
View Code

  伪类选择器:LoVe HAte

    a:link    没有被访问

    a:vistied   访问过后的

    a:hover    鼠标悬停的时候

    a:active    摁住的时候

  伪元素选择器

    p:before 在..的前面添加内容 一定要结合content

    p:after  在...的后面添加内容,与后面的布局有很大的关系

技术分享图片
        <!--将p标签首元素调整-->
        p:first-letter{
            color: red;
            font-size: 26px;
        }
        p:before{
            content: ‘^‘;
        }
        p:after{
            content: ‘$‘;
        }
        .box2{
            /*隐藏元素不占位置*/
            /*display: none;*/
            display: block;
            /*隐藏元素 占位置*/
            visibility: hidden;
            /*不占位置了*/
            height: 0;
        }
View Code

2.css的继承性和层叠性

  继承性:color、text-xxx、font-xxx、line-xxx的属性是可以继承下来,盒子模型的属性是不可以继承下来的

    a标签有特殊情况,设置a标签的的字体颜色要选中a,不能用继承性

  层叠性:覆盖

    1.行内>id>class>标签*****

    2.数 id class 标签

    3.继承来的属性,他的权重为0,与选中的标签没有任何可比性

    4.如果都是继承来的属性,保证就近原则

    5.都是继承来的属性,选择的标签一样近,再去数权重

3.盒模型

  属性:

    width:内容的宽高

    height:内容的高度

    padding:内边距 内容到边框的距离

    border:边框

    margin:外边距,另一个边到另一个边的距离

技术分享图片
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            padding: 50px;
            border: 10px solid green;
            margin-left: 50px ;
        }
View Code

  盒模型的计算:

    总结:如果保证盒模型的大小不变,加padding就一定要减width或者减height

        前提是在表征文档流

          padding:父子之间调整位置

          margin:兄弟之间调整位置

4.布局的方式  浮动

    浮动能实现元素并排

    盒子一浮动,就脱离了标准文档流,不占位置

  float:right;  float:left;

 

css基础知识

标签:margin   lov   隐藏元素   round   另一个   添加   width   inpu   src   

原文地址:https://www.cnblogs.com/qq849784670/p/9670341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!