Python全栈开发之13、CSS

一、css简介

　　CSS 是 Cascading Style Sheets的缩写，用来设计网页的样式布局，以及大小来适应不同的屏幕等，使网页的样式和网页数据分离，

二、导入css

导入css有4种方式：

1.行内式
行内式是在标记的style属性中设定CSS样式。这种方式没有体现出CSS的优势，不推荐使用。

2.嵌入式
嵌入式是将CSS样式集中写在网页的<head></head>标签对的<style></style>标签对中。格式如下：

<head>

　　...此处写CSS样式

　　</style>

</head>

3.导入式
将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中，使用的语法如下：

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

</style>

4.链接式
也是将一个.css文件引入到HTML文件中 <link href="mystyle.css" rel="stylesheet" type="text/css"/>

注意：

导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。此外行内的样式等级最高

三、css选择器

标签选择器　　 p { color:green; }
id选择器 #info { background:#ff0; }
class属性选择器 .info { background:#ff0; }
*通用元素选择器匹配所有的标签

上面4种是基础的选择器，都是选择单一的标签，如果要选择多元素的话就要使用组合选择器下面来看一下常用的组合选择器

多元素选择器，同时匹配多个元素，元素之间用逗号分隔　
后代元素选择器，比如 E F 匹配所有属于E元素后代的F元素，E和F之间用空格分隔
子元素选择器，比如 E>F 匹配所有E元素的子元素F
毗邻元素选择器，E+F 匹配所有紧随E元素之后的同级元素F

此外还有属性选择器，下面来看一下有哪些属性选择器

　　 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[att|=val] 匹配所有att属性具有多个连字号分隔（hyphen-separated）的值、其中一个值以“val”开头的E元素，主要用于lang属性，

比如“en”、“en-us”、“en-gb”等等 p[lang|=en] { 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;}

p:before 在每个 <p> 元素的内容之前插入内容 p:before{content:"hello";color:red}

p:after 在每个 <p> 元素的内容之前插入内容 p:after{ content:"hello"；color:red}

　　　　 .a p{                               后代选择器，这里间将所有的p标签都给选择出来
            background-color: blue;
            font-size: 40px;
        }
        .a>p {                                子代选择器，这里将 <p>hello 3</p> 选择出来
            background-color: blue;
            font-size: 40px;
        }
        .b+p {                      兄弟选择器，将同级的标签选择出来
            background-color: blue;
            font-size: 40px;
        }
        [class] {                   属性选择器，将clas的属性都选择出来
            background-color: blue;
        }
        [class='b'] {                将class = 'b'的选择出来
            background-color: blue;
        }
        [class |='b'] {                匹配具有连字符 - 的以b开头的class属性
            background-color: blue;
        }
        [class ^='b'] {                 匹配以b开头的class属性
            background-color: blue;
        }
        [class ~= 'c'] {                匹配具有多个空格分隔的值、其中一个值等于'c'的class属性
            background-color: blue;
        }
        p:before {
            content:'666' ;
            color: blue;
        }

除了上面说的几种选择器，还有一种特殊的伪类选择器，专用于控制链接的显示效果：

　　a:link（没有接触过的链接）,用于定义了链接的常规状态。

　　a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

　　a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

　　a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

注意顺序这4个伪类的顺序 lvha

四、css常用的属性　

1 颜色属性：

<div style="color:blueviolet">ppppp</div>

<div style="color:#ffee33">ppppp</div>

<div style="color:rgb(255,0,0)">ppppp</div>

<div style="color:rgba(255,0,0,0.5)">ppppp</div>

2 字体属性：

　　font-size: 20px/50%/larger

　　font-family:'Lucida Bright'

　　font-weight: lighter/bold/border/

3 背景属性：

background-repeat: no-repeat;(repeat:平铺满)

background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)

简写：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

4 文本属性：

　　font-size: 10px;

　　text-align: center;横向排列

　　line-height: 200px;文本行高通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比

　　text-indent: 150px; 首行缩进，

　　letter-spacing: 10px;

　　word-spacing: 20px;

　　direction: rtl;从右向左，默认从左向右

　　text-transform: capitalize;

5 边框属性：

　　border-style: solid;

　　border-color: chartreuse;

　　border-width: 20px;

简写：border: 30px rebeccapurple solid;

6 列表属性

ul,ol{

　　 list-style: decimal-leading-zero; 0开头的数字标记。(01, 02, 03, 等。)

list-style: none;　　　　　　　

　　　 list-style: circle;　　　　　　　标记是空心圆

list-style: upper-alpha;　　　大写字母

list-style: disc;　　　　　　　　默认。标记是实心圆

}

7 dispaly属性

none
block
inline

8 盒子模型

　　 padding:用于控制内容与边框之间的距离；

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

内边距会影响盒子的大小，外边距不会影响盒子的大小,需要设置练习： 300px*300px的盒子装着100px*100px的盒子，分别通过margin和padding设置将小盒子移到大盒子的中间

注意一、

　　边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下，body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了。

注意二、

　　margin collapse（边界塌陷或者说边界重叠）

外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。

1、兄弟div：

　　　　上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值

2、父子div ：

　　如果父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括　　　border，padding，inline content 中的其中一个，然后按此div进行margin ；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" type="text/css" href="1.css">-->
    <style>
        /*div {*/
            /*height: 800px;*/
            /*width: 800px;*/
            /*background-color: bisque;*/
            /*background-image: url('1.jpg');*/
            /*background-repeat:no-repeat ;*/
            /*background-position: right;*/

            /*background: no-repeat url('1.jpg') bisque bottom;*/
            /*background: no-repeat url('1.jpg') bisque;*/
            /*color: rgba(0,0,0,0.5);*/


            /*font-size: 60px;*/
            /*font-family: Arial;*/
            /*font-weight: lighter;*/

            /*letter-spacing: 10px;*/
            /*!*text-align: center;*!*/
            /*text-transform: capitalize;*/
            /*direction: rtl;*/

            /*border: 30px black solid;*/
        /*}*/
        /*ul {*/
            /*list-style: disc;*/
        /*}*/
        body {
            /*border: 1px solid black; 注意效果*/
            /*background-color: crimson;*/
            margin: 0px;
        }
        #outer {
            height: 300px;
            width: 300px;
            border: 1px solid;
            /*padding: 1px;*/
            background-color: blue;
            margin: 50px;
        }
        #outer1 {
            height: 300px;
            width: 300px;
            border: 1px solid;
            background-color: aquamarine;
            margin: 50px;
        }
        #inner {
            height: 100px;
            width: 100px;
            background-color: gold;
            margin-left: 100px;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div id="outer">
        <!--<p>hello</p>   注意这种效果为什么-->
        <div id="inner">
        </div>
    </div>
    <div id="outer1">

    </div>

</body>
</html>

六、float　　

　　浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次，会覆盖标准流的东西。

　　假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。靠近页面边缘的一端是前，远离页面边缘的一端是后。

　　元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列。

　　有浮动当然有清除浮动，清除浮动用clear，对于CSS的清除浮动(clear)，一定要牢记只能影响使用清除的元素本身，不能影响其他元素。

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

    <style>
        body{
            /*border: 1px solid;*/
            margin: 0px;
        }
        #a{
            height: 100px;
            width: 100px;
            background-color: darkorange;
            /*float: left;*/
            /*float: right;*/
        }
         #b{
            height: 200px;
            width: 200px;
            background-color: red;
             float: right;
             /*clear: both;*/
        }
         #c{
            height: 100px;
            width: 300px;
            background-color: blue;
             float: left;
        }
         /*#d{*/
            /*height: 100px;*/
            /*width: 300px;*/
            /*background-color: black;*/
        /*}*/
    </style>
</head>


<body>
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</body>
</html>

七、position　

1 static

　　默认值 static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。说到这里我们不得不提一下一个定义——文档流，文档流其实就是文档的输出顺序，也就是我们通常看到的由左到右、由上而下的输出形式，在网页中每个元素都是按照这个顺序进行排序和显示的，而float和position两个属性可以将元素从文档流脱离出来显示。默认值就是让元素继续按照文档流显示，不作出任何改变。

2 fixed

在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置。

fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。注意点：一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float。这是一个常识性的知识点，因为这是两个不同的流，一个是浮动流，另一个是“定位流”。但是 relative 却可以。因为它原本所占的空间仍然占据文档流。

3 relative

　　对象遵循正常文档流，不脱离文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。

如果设定 position:relative，就可以使用 top,bottom,left和 right 来相对于元素在文档中应该出现的位置来移动这个元素。[意思是元素实际上依然占据文档中的原有位置，只是视觉上相对于它在文档中的原有位置移动了]

4 absolute

　　absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。当指定 position:absolute 时，元素就脱离了文档[即在文档中已经不占据位置了]，可以准确的按照设置的 top,bottom,left 和 right 来定位了。如果一个元素绝对定位后，其参照物是以离自身最近元素是否设置了相对定位，如果有设置将以离自己最近元素定位，如果没有将往其祖先元素寻找相对定位元素，一直找到html为止。

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

    <style>
        body{
            /*border: 1px solid;*/
            margin: 0px;
        }
        #father{
            position: relative;
            left: 100px;
            top: 100px;
            height:800px;
            width: 600px;
            background-color: maroon;
        }
        #a{
            height: 100px;
            width: 100px;
            background-color: darkorange;
            /*position: relative;*/
            /*position: fixed;*/
        }
         #b{
            height: 200px;
            width: 200px;
            background-color: red;
             position: absolute;
             left: 100px;
             top: 100px;
             /*position: relative;*/
             /*left: 100px;*/
             /*top: 100px;*/
        }
         #c{
            height: 100px;
            width: 300px;
            background-color: blue;
             /*float: left;*/
        }
         #d{
            height: 300px;
            width: 400px;
            background-color: black;
        }
    </style>
</head>


<body>
<div id="father">
    <div id="a"></div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
</div>

</body>
</html>

杂项

1、css文档从上到下执行，以最后一个为准

a {
    font-size: 10px;
}

b {
    font-size: 40px;
}

<p class = "a b"> ddd </p>

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

3、父div里面的子div都float,

　　方法1、在最后加一个div然后添上属性 clear：both　

　　方法2、定义一个通用属性，

　　　　　clearfix:afte{

   　　　　 content: '111';
    　　　　display: block;
    　　　　clear: both;

    　　　　/* visibility 隐藏占高度*/
    　　　　visibility: hidden;
    　　　　height: 0;
    　　　　/*display: none;隐藏不占高度*/

}

posted @ 2016-06-29 21:38 赤木晴子梦阅读(654) 评论(0) 编辑收藏举报

刷新页面返回顶部

1000-7