CSS_基础

CSS:

　　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

　　CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力.

Css书写规则：

Css书写规则主要是由两部分组成：选择器和属性。

        selector {
                  property: value;
                  property: value;
             　　  property: value
        
          }

例：
　　 h1 {font-family: Microsoft YaHei;background-color: lightseagreen;height: 24px;color: white;}
    h1->就是选择器，选择的是HTML中的 h1 标签
　  中括号内的就是设置h1标签的属性.

Css的四种引入方式：

1、行内：将style当做一种属性来添加到文本中，这种体现不出css的优势，故不推荐。

<p style="background-color: rebeccapurple">Hello World</p>

2、嵌入：在head中为多种html样式编写属性。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3、导入：那如果我想多个html文档共享一个CSS的文本的话，就可以利用@import的方式。

          <style type="text/css">

                    @import"mystyle.css"; 此处要注意.css文件的路径

          </style>

4、链接：最后一种就是在head中利用link 添加href来引入css文件

 <link href="mystyle.css" rel="stylesheet" type="text/css"/>

其中第三种和第四种分别是 Css 和 HTML两种方式

区别:

　　@import的模式是属于Css范畴，网页在加载的时候会加载完成html后再加载Css的内容，所以如果文档比较多的话，网页会出现闪烁。

　　link会在网页文件主体加载之前加载CSS文件，因此显示出的网页一开始就是带样式的效果，不会像导入式的那种先显示无样式的网页，然后显示有样式的网页，这是链式的优点。

选择器：

　　选择器是一种模式，用于选择需要添加样式的元素.

基本选择器：

　　　　  通配选择器：所有标签
        *{
            margin = 0px；
        }
        - id 选择器,同一种ID选择器只能在HTML使用一次id
        #red{
            color:red;
        }
        - class选择器:多种标签对同一种的样式的使用
        .tt {
            color: dodgerblue;
            font-size: 20px;

        }

        - 元素选择器 ：
        div.rr{
            font-size: 100px;
        }
        - h1,h2都使用这一种样式
　　　　  h1,h2{
            font-size: 100px;
        }

组合选择器：

　　组合选择器的应用场景就是当我们标签存在嵌套关系时，想要针对性的来将各个标签渲染，就需要用到组合选择器，在了解组合选择器之前，我们可以先了解一下标签嵌套。

标签嵌套：

　　1、块级标签可以嵌套内联标签和某些块级标签；

　　2、有几个特殊的块级元素只能包含内联元素，不能包含块级元素；如：h1、h2、h3、h4、h5、h6、p、dt；

　　3、内联标签不可嵌套块级标签；

　　4、块级元素与块级元素并列、内嵌元素与内嵌元素并列

　　Ps：块级标签中的<p></p>不可嵌套其他块级标签，否则在查看源码的时候会出现差异。　　

后代选择器：

　　又称为包含选择器。后代选择器可以选择作为某元素后代的元素。

- 将div所嵌套中的 p 标签 渲染成黄色
div p{
            color: yellow;
        }

子元素选择器：

　　只渲染子元素的选择器，相比较后代选择器，渲染的范围只在下一层（儿子辈的）元素。

- 渲染h1子标签中的strong标签的颜色为红色
h1 > strong{
    color:red;
    }

- 渲染成功
<h1>
    This is 
    <strong>very</strong> 
    <strong>very</strong>     
    important.
</h1>
- 这个就不会渲染h1标签下的 strong 内容
<h1>This is 
    <em>
        really <strong>very</strong>
    </em> important.
</h1>

相邻兄弟选择器：

　　相邻兄弟选择器（Adjacent sibling selector）可选择紧接在另一元素后的元素，且二者有相同父元素。

- 两个相邻的li元素，且二者有同一父元素，渲染后一个li元素；
li + li {
    font-weight:bold;
}
- 这两个列表中的tiem2和item3都会被加粗
<div>
  <ul>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ul>
  <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
  </ol>
</div>

兄弟选择器：

　　可选择在同一层级下的，在另一元素后的元素。

与相邻兄弟选择器一样，只是可以不相邻而已。
li~ li {
    font-weight:bold;
}

属性选择器：

　　根据元素的属性及属性值来选择元素。

 E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略。
                 比如“[cheacked]”。以下同。）   p[title] { color:#f00; }

 
 E[att=val]      匹配所有att属性等于“val”的E元素   div[class=”error”] { color:#f00; }

 
 E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素 
                 td[class~=”name”] { color:#f00; }

 E[attr^=val]    匹配属性值以指定值开头的每个元素                     
                 div[class^="test"]{background:#ffff00;}

 E[attr$=val]    匹配属性值以指定值结尾的每个元素    div[class$="test"]{background:#ffff00;}

 E[attr*=val]    匹配属性值中包含指定值的每个元素    div[class*="test"]{background:#ffff00;}

Css-优先级

　　在给一个元素(比如div)应用样式的时候，会有一些疑问，为什么我写在后面的样式不能覆盖前面的样式呢，不是说CSS是层叠样式表吗？

　　当我们给一个标签应用样式的时候，首先需要考虑的就是优先级。

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

　　如果多个选择器对同一标签应用同一种属性的样式（color/font-size/width/height...）样式，那么该属性就会应用权重最高的那种选择器，如果是组合选择器的话，那么就将两个样式的权重相加取最高的和的组合选择器。

同样是对 p3进行渲染：
            权重：10+10+10
            .p1 .p2 .p3{
                color:red;
            }
            权重：10
            .p3{
                color:green;
            }
            
        <div class="p1">
            <div class="p2">
                <p class="p3">PPP</p>
            </div>
        </div>
        出现的效果就是PPP为红色，但是如果我们想就应用单独p3的样式(第二个),就用到了!important
        .p3{
                color:green!important;
            }
        这样出现的效果就是PPP为绿色

　　1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。
   
　　2、有!important声明的规则高于一切。

　　3、如果!important声明冲突，则比较优先权。

　　4、如果优先权一样，则按照在源码中出现的顺序决定，后来者居上。

　　5、由继承而得到的样式没有specificity的计算，它低于一切其它规则(比如全局选择符*定义的规则)。

Css-属性

Color文本：颜色对照表

my_color{
        color: #000;  - 16进制
        color: red;　　- 颜色单词
        color: RGB(0,255,255);  - RGB
        color: RGBA(0,0,255,1); - RGBA
　      opacity:0.5; - 透明度
    }

水平对其方式：text-algin

　　规定元素中的文本的水平对齐方式。

　　该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。

.text{
        width: 550px;
        height: 550px;
        background-color:blue;
        text-align: center;     把文本排列到中间。
        text-align: justify;    实现两端对齐文本效果。
        text-align: left;       把文本排列到左边。默认值：由浏览器决定。
        text-align: right;      把文本排列到右边。
        text-align: inherit;    从父元素继承 text-align 属性的值。
    }

背景属性：

body{
            background-color:yellow;           -规定要使用的背景颜色。
            background-image:url("gao.jpg");   -规定要使用的背景图像。
            background-position:center（水平位置） center(垂直位置);            -规定背景图像的位置。
            background-size:80px(宽) 80px(高);                    -规定背景图片的尺寸。  
            background-repeat:no-repeat;   -规定如何重复背景图像。    

            background-origin:content-box; -相对于内容框来定位。     -规定背景图片的定位区域。   
                              border-box   -相对于边框盒(外边框)定位。
                              padding-box  -相对于内边距框来定位。(默认);  
    
            background-clip:content-box;   -规定背景的绘制区域。
            background-attachment: fixed; 背景不会随着滚动条滚动而滚动   
                                   scroll; 背景图片随着滚动条滚动而滚动            -规定背景图像是否固定或者随着页面的其余部分滚动。

            当然，我们可能觉得一个个这样设置比较麻烦，我们也可以把这些属性写在一条属性里：
            background: red url(bgimage.gif) no-repeat fixed top;

边框属性：

.border{

            height: 100px;
            width: 100px;

            border-width: 3px;      -规定边框的宽度
            border-color: red;      -规定边框的颜色。
            border-style: solid;    -规定边框的样式。

            同样的也可以写在一条属性中：
                   border:red 3px solid;
            而且四条边框都可以单独设置：
            border-top-style:dotted;      -上：虚线
            border-right-style:solid;     -右：实线
            border-bottom-style:double;   -下：双框
            border-left-style:none;       -左：无

        }

列表属性：

list-style-type    设置列表项标记的类型，其中如果设置属性为none，则不显示每列的起始符号
list-style-position    设置在何处放置列表项标记。
list-style-image    使用图像来替换列表项的标记。

简写：
ul
  {
      list-style:square inside url('/i/arrow.gif');
  }

display属性： 属性规定元素应该生成的框的类型。

none	此元素不会被显示。(隐藏)
block	此元素将显示为块级元素，此元素前后会带有换行符。注：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block	行内块元素。会将块标签显示为内联元素，使内联元素显示为块级元素(同时也具备块/内联标签的一些特性)

当给块级元素设置inline-block的时候，会让块级元素显示为内联元素（竖排边横排）但是每个标签之间却有空隙：

暂时可以把设置成inline-block的标签再装入另一个渲染id = “outer”的标签中就行了

#outer{
            width:100%    -这个是必须要设置的，因为块级元素内嵌块级元素的话，如果原尺寸宽度小于所内嵌元素的宽度，内嵌元素就会换行显示。这里设置成与浏览器同等宽度。
            border: 3px dashed;
            word-spacing: -5px;    -字间距为-5px
        }

Css-伪类：

　　伪类用于向某些选择器添加特殊的效果。

超链接：

a:link {color: red}        /* 未访问的链接 */
a:visited {color: yellow}    /* 已访问的链接 */
a:hover {color: green}    /* 鼠标移动到链接上 */
a:active {color: blue}            /* 选定的链接 */

before、after：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p:after{
            content:'world';
            display: block;
            color: red;
        }
        p:before{
            content: 'Hello';
        }
    </style>
</head>
<body>
    <p></p>
</body>
</html>

内外边距：

1、margin(外边距): 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            border: 3px solid yellow;

        }

        div{

            width: 100px;     -宽
            height: 100px;    -高
            border:solid blue 3px;  边框属性
            margin-top: 10px;   -上框与其他元素的距离
            margin-right: 10px;   -右...
            margin-bottom: 20px;  -下...
            margin-left: 10px;          -左...

            简：顺序是顺时针上右下左
            margin：10px 10px 20px 10px;
        }

    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

注意：

　　边界重叠:我们设置了div的margin-top:10px、而margin-bottom：20px ，代码中两个<div>标签相挨着(兄弟标签)并且是上下挨着，那么margin的属性就会出现冲突，css会选择 数值大的做最终的值

　　边界塌陷（父子关系）：如果父级div中没有border、padding、inline、content，子级div的margin会一直向上找，直到找到某个标签包括border、padding、inline、content中的其中一个，然后按此div 进行margin；

　　解决方法：在父级div选择器中添加 overflow: hidden;

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            /*overflow: hidden;*/

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }

    </style>
</head>
<body>
    <div class="div1">
        <div class="div2"></div>
        <div class="div2"></div>
    </div>
</body>

</html>

2、padding(内边距/填充)：用于控制内容与边框之间的距离，更改元素的padding，就是在原有的padding基础上填充像素，也相当于增大了元素的大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            border: 3px solid yellow;
        }

        div.one{
            width: 100px;   -宽
            height: 100px;  -高
            border: blue solid 3px;  边框
        }

        div.two{
            width: 100px;
            height: 100px;
            border: lightseagreen solid 3px;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 10px;
            - 简写：上右下左
            padding:10px 10px 10px 10px;
        }
    </style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
</body>
</html>

float：

　　当元素被设置为浮动元素时，会先判断上一个元素是否为浮动，如果是浮动，则会紧贴上一个元素浮动，如不是，则与上个元素垂直距离不变。

　　 float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

排列规则：

　　block：block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；

　　inline：inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。

文档流：元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。（正常排列）

脱离文档流：将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。（float浮动时会将自己变为脱离文档流）

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;

            /*background-color:lightgreen;*/
        }

        .div1{
            background-color: yellow;
            width: 100px;
            height: 100px;
            float:left;
        }
        .div2{
            border:blue solid 3px;
            width: 50px;
            height: 150px;

            /*float:left;*/
        }

        .div3{
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 10px;
            float:left;
        }
        .div4{
            background-color: black;
            width: 100px;
            height: 100px;
            margin: 10px;
            float:left;
        }
    </style>
</head>
<body>

<div style="border: solid aqua 1px">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
</div>

</body>

</html>

坍塌现象：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;
             padding:0;
         }
        .container{
            border:1px solid blue;
        }
        .box1{
            background-color:green;
            float:left;
            width:100px;
            height:100px;
        }
        .box2{
            background-color:yellow;
            float:left;
            width:100px;
            height:100px;
        }
         .box3{
             background-color:red;
             height:40px;
         }
</style>
</head>
<body>

        <div class="container">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
</body>
</body>
</html>

解决方案除了设置container的行高，就用到了清除浮动这一属性。

清除浮动：

　　规定元素的哪一侧不允许其他浮动元素。

　　left : 不允许左边有浮动对象。
　　right : 不允许右边有浮动对象。
　　both : 不允许有浮动对象。

解决方案：
　　在container和box3标签之间添加一个clear：both的标签就可以了,这里就利用到了伪类的after属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;
             padding:0;
         }
        .container{
            border:1px solid blue;
            /*height: 100px;*/
        }
        .box1{
            background-color:green;
            float:left;
            width:100px;
            height:100px;
        }
        .box2{
            background-color:yellow;
            float:left;
            width:100px;
            height:100px;
        }
         .box3{
             background-color:red;
             height:40px;
         }
        .container:after{
            content: '';
            display: block;
            clear: both;
        }

</style>
</head>
<body>

        <div class="container">
            <div class="box1"></div>
            <div class="box2"></div>
        </div>
        <div class="box3"></div>
</body>
</body>
</html>

Position：属性规定元素的定位类型。

　　static：Position的默认值，没有定位，默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

　　relative：生成相对定位的元素，相对于其文档流位置进行定位（不脱离文档流）

　　absolute：绝对定位，相对于 static 定位以外的第一个父元素进行定位（如果都没有定位属性，那么就到最上层的body），完全脱离文档流，元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

　　fixed：绝对定位，相对于浏览器窗口定位，完全脱离文档流且不随着滚动条移动而移动。

　　以上元素除static以外都可根据元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .outet{
            position: relative;
            border: solid 3px yellow;
        }
        .item{
            width: 100px;
            height: 100px ;
            color: white;
        }
        .r1{
            background-color: blue;
        }
        .r2{
            background-color: red;
            /*position: relative;*/
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .r3{
            background-color: darkgreen;
        }

        .r4{

            background-color: lightseagreen;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }
    </style>
</head>
<body style="height: 2000px;background-color:aquamarine">

<div class="item r1">r1</div>
<div class="outet">

    <div class="item r2">r2</div>
    <div class="item r3">r3</div>
    <div class="item r4">r4</div>
</div>


</body>
</html>

模仿抽屉网head：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        *{
            margin:0;
            text-decoration: none;
            font-size: 14px;
        }
        .head-band{
            margin: 0px 0px 0px 0px;
            width: 100%;
            position: fixed;
        }

        .logo{
            height: 23px;
            width: 121px;
            background: url("logo.png");
            float: left;
            margin-top: 11px;
        }

        .head-content{
            /*border:solid red 3px;*/
            width: 1016px;
            margin:0 auto;
            position: relative;

            line-height: 44px;
        }

        .head-band, .head-content{
            height: 44px;
            background-color: #2459a2;
        }


        .tb{
            display: inline-block;
            color: white;
            padding: 0px 12px 0px 12px;
            margin-left: -5px;
        }
        .active-menu{
            /*border: solid 1px yellow;*/
            float:left;
            margin-left: 20px;
        }
        .active-menu .active{
            background-color: #336699;
            color: aliceblue;

        }

        .head-content .tb:hover{
            background-color: #336699;
            color:aliceblue;
        }

        .active-nav{
            /*border: yellow 3px solid;*/
            /*float: right;*/
            position: absolute;
            right: 200px;
        }
        .key-sera{
            float: right;
            margin-right: 30px;
        }
    </style>
</head>
<body>
    <div class="head-band">
        <div class="head-content">
            <a hred="#" class="logo"></a>
            <div class="active-menu">
                <a href="#" class="tb active">全部</a>
                <a href="#" class="tb">笑话</a>
                <a href="#" class="tb">图片</a>
                <a href="#" class="tb">挨踢1024</a>
                <a href="#" class="tb">你问我答</a>
            </div>
            <div class="active-nav">
                <a href="#" class="tb register">注册</a>
                <a href="#" class="tb loggin">登陆</a>
            </div>
            <div class="key-sera">
                <form action="#" name="serarch" id="search">
                    <input type="text" name="words">

                </form>
            </div>

            </div>
        </div>
    </div>
</body>
</html>

posted @ 2017-08-17 08:15 LeeeetMe 阅读(136) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

CSS_基础

CSS:

Css书写规则：

Css的四种引入方式：

选择器：

基本选择器：

组合选择器：

属性选择器：

Css-优先级

Css-属性

Color文本：颜色对照表

水平对其方式：text-algin

规定元素中的文本的水平对齐方式。

背景属性：

Css-伪类：

内外边距：

float：

模仿抽屉网head：

公告

　　规定元素中的文本的水平对齐方式。