CSS

一. css的四种引入方式 

 1.行内式

 2.嵌入式

 3. 链接式

　将一个.css文件引入到HTML文件中　　

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

 4.导入式

二. css选择器

1.基本选择器

　　

二.组合选择器

1
2
3
4
5
6
7
8
9
E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color:#f00; }
  
E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝
  
E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; }
   
E + F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; }
  
E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }

注意嵌套规则：

  1. 块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素，它只能包含其它内联元素。

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

  3. li内可以包含div

  4. 块级元素与块级元素并列、内联元素与内联元素并列。

三.属性选择器

E[att]          匹配所有具有att属性的E元素，不考虑它的值。（注意：E在此处可以省略)。

E[att=val]      匹配所有att属性等于“val”的E元素  

E[att~=val]     匹配所有att属性具有多个空格分隔的值、其中一个值等于“val”的E元素

E[attr^=val]    匹配属性值以指定值开头的每个元素                   

E[attr$=val]    匹配属性值以指定值结尾的每个元素  

E[attr*=val]    匹配属性值中包含指定值的每个元素  

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        [alex]{

            color: red;          #E[att]

        }

        div[alex="sb"]{

            color: red;          #E[att=val]

        }

        div[alex~="xx"]{

            color: red;          #E[att~=val]

        }

        div[alex^="sb"]{

            color: red;           #E[attr^=val]

        }

        div[alex*="sb"]{

            color: red;           E[attr*=val]

        }

    </style>

</head>

<body>

    <div alex="sb">123</div>

    <p alex="sb">123</p>

    <div alex="sb xx">123</div>

</body>

</html>

　　

伪类(Pseudo-classes)

　　CSS伪类是用来给选择器添加一些特殊效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
a:link（没有接触过的链接）,用于定义了链接的常规状态。
 
a:hover（鼠标放在链接上的状态）,用于产生视觉效果。
 
a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。
 
a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。
 
伪类选择器 : 伪类指的是标签的不同状态:
 
           a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态
 
a:link {color: #FF0000} /* 未访问的链接 */
 
a:visited {color: #00FF00} /* 已访问的链接 */
 
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
 
a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }
 
 <style type="text/css">

     a:link{

         color: red;

     }

     a:visited {

         color: blue;

     }

     a:hover {

         color: green;

     }

     a:active {

         color: yellow;

     }

 </style>

 </head>

 <body>

     <a href="01-hello-world.html">hello-world</a>

 </body>

 </html>

 例子

列子

 <style type="text/css">

     .box{

         width: 100px;;

     }

     .top,.bottom{

         width: 100px;

         height: 100px;

         background-color: chartreuse;

     }

     .top:hover{

         background-color: red;      鼠标移动到top区域，颜色变红色

     }

     .box:hover .top{

         background-color: red;      鼠标移动到box区域，top区域变红色

     }

 </style>

 </head>

 <body>

     <div class="box">

         <div class="top">top</div>

         <div class="bottom">bottom</div>

     </div>

 </body>

 </html>

:hover 背景黄色 鼠标上去红色 例子

选择器的优先级　

　　所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。

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

　　　　1 内联样式表的权值最高                 style=""－－－－－－－－－－－－1000；

　　　　2 统计选择符中的ID属性个数。        #id －－－－－－－－－－－－－－100

　　　　3 统计选择符中的CLASS属性个数。  .class －－－－－－－－－－－－－10
　　　　4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

　　按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

 1、文内的样式优先级为1,0,0,0，所以始终高于外部定义。

 　　2、有!important声明的规则高于一切。

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

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

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

优先级顺序

三  css属性操作

1.css text

a. 颜色属性

1
2
3
4
5
6
7
<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>

b. 字体属性

1
2
3
4
5
6
7
font-size: 20px/50%/larger
  
font-family:'Lucida Bright'
  
font-weight: lighter/bold/border/                      #粗细
  
<h1 style="font-style: oblique">老男孩</h1>    #斜体

c. 背景属性

1
2
3
4
5
6
7
8
9
10
background-color: cornflowerblue
  
background-image: url('1.jpg');
  
background-repeat: no-repeat;(repeat:平铺满)
  
background-position: right top（20px 20px）;
 
----简写----
background: #ffffff url('1.png') no-repeat right top;
 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>test</title>

     <style>

         .back{

             border:1px solid red;

             width: 800px;

             height: 800px;

             background-image: url("meinv.png");

             background-repeat: no-repeat;    #不平铺满

             background-repeat: repeat-x;     #横向平铺满

         }

         .back{

             border:1px solid red;

             width: 800px;

             height:800px;

             background-image: url("meinv.png");

             background-repeat: no-repeat;

             background-position: 0 0;

         }

     </style>

 </head>

 <body>

     <div class="back">

     </div>

 </body>

 </html>

背景属性 示例

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         span{

             display: inline-block;

             width: 18px;

             height: 20px;

             background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");

             background-position: 0 -100px;

         }

     </style>

 </head>

 <body>

     <span></span>

     <span></span>

     <span></span>

     <span></span>

 </body>

 </html>

抽屉 小图标显示

d.文本属性

1
2
3
4
5
6
7
8
9
10
11
12
font-size:        10px;
 
text-align: center;        横向排列
 
line-height: 200px;        文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
 
vertical-align:－4px       设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
 
text-indent: 150px;        首行缩进
letter-spacing: 10px;      字符于字符之间的距离
word-spacing: 20px;        单词与单词之间的距离
text-transform: capitalize;    单词首字母大写 
 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>文本</title>

     <style>

         div{

             height:100px;

             background-color: aquamarine;

             text-align: center;   #水平居中

             line-height:100px;    #文本设置为和div一样的高度，显示居中

         }

     </style>

 </head>

 <body>

     <div>文本属性</div>

 </body>

 </html>

text-align line-height

e.边框属性

1
2
3
4
5
6
7
8
9
border-style: solid;
   
border-color: chartreuse;
   
border-width: 20px;
 
-----------简写---------------
 
border: 30px rebeccapurple solid;
 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>文本</title>

     <style>

         .foo{

             width:200px;

             height:200px;

             border:1px solid red;

         }

     </style>

 </head>

 <body>

     <div class="foo"></div>

 </body>

 </html>

示例

f.列表属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
list-style-type         设置列表项标志的类型。
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
  
list-style          简写属性。用于把所有用于列表的属性设置于一个声明中
 
 
--------------------------------
 
#使用图像来替换列表项的标记:
 
ul {
     list-style-image: url('');
            }
 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>文本</title>

     <style>

         ul,ol{

             list-style: none;   #取消列表前面的小图标

         }

     </style>

 </head>

 <body>

     <ul>

         <li>123</li>

         <li>456</li>

         <li>789</li>

     </ul>

     <ol>

         <li>123</li>

         <li>456</li>

         <li>789</li>

     </ol>

 </body>

 </html>

e.dispaly属性

none

block

inline

inline-block

#none(隐藏某标签)  p{display:none;}

注意与visibility:hidden的区别：

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

#block(内联标签设置为块级标签)  span {display:block;}

注意：一个内联元素设置为display:block是不允许有它内部的嵌套块元素。　

#inline(块级标签设置为内联标签)  li {display:inline;}

#inline-block

display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决

    #outer{

            border: 3px dashed;

            word-spacing: -5px;

        } 
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         span,a{

             width:100px;

             height:100px;

         }

         span{

             background-color: yellow;

             display: inline-block;

         }

         a{

             background-color: firebrick;

             display: inline-block;

         }

         div{

         word-spacing: -5px;     #取消边距间隔

         }

     </style>

 </head>

 <body>

     <div>

         <span>span</span>

         <a href="#">a</a>

     </div>

 </body>

 </html>

word-spacing 取消边距间隔

四.外边距(margine)和内边距(padding)

1
2
3
4
margin:            用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
padding:           用于控制内容与边框之间的距离；  
Border(边框):       围绕在内边距和内容外的边框。
Content(内容):     盒子的内容，显示文本和图像。

margine(外边距)

单边外边距属性：

    margin-top:100px;

    margin-bottom:100px;

    margin-right:50px;

    margin-left:50px;

简写属性:------------------

margin:10px 20px 20px 10px；

        上边距为10px

        右边距为20px

        下边距为20px

        左边距为10px

margin:10px 20px 10px;

        上边距为10px

        左右边距为20px

        下边距为10px

margin:10px 20px;

        上下边距为10px

        左右边距为20px

margin:25px;

        所有的4个边距都是25px

　　

五. float属性

  • 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
  • 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .container:after{

             content: ".";

             display: block;

             clear: both;

             visibility: hidden;

             line-height: 0;

             height: 0;

             font-size:0;

         }

         .box1{

             width: 200px;

             height: 200px;

             background-color: red;

             float: left;

         }

         .box2{

             width: 200px;

             height: 200px;

             background-color: blue;

             float: left;

         }

     </style>

 </head>

 <body>

 <div class="container">

     <div class="box1">box1</div>

     <div class="box2">box2</div>

 </div>

 <div>footer</div>

 </body>

 </html>

清除浮动

六.position(定位)

a. static

　　static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。

b. position: relative／absolute

　　 position: relative

　　　　1. 参照物是元素之前文档流中的位置

　　　　2. 元素不脱离文档流(之前的空间位置依然存在)

　　position: absolute　　　

　　 　　定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素

　　　　          那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框

而不论原来它在正常流中生成何种类型的框。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0px;

         }

         .div1{

             width: 300px;

             height: 200px;

             background-color: red;

         }

          /*.div2{*/

             /*width: 300px;*/

             /*height: 300px;*/

             /*background-color: rebeccapurple;        */

              /*position: relative;*/

              /*top:100px;*/

              /*left:100px;*/

          /*}*/

          .div2{

             width: 300px;

             height: 300px;

             background-color: rebeccapurple;

              position: absolute;

              top:100px;

              left:100px;

          }

          .div3{

             width: 300px;

             height: 200px;

             background-color: green;

         }

     </style>

 </head>

 <body>

 <div class="outer">

     <div class="div1"></div>

     <div class="div2"></div>

     <div class="div3"></div>

     <div class="div4"></div>

 </div>

 </body>

 </html>

relative absolute例子

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         *{

             margin: 0px;

         }

         .item1{

             width: 200px;

             height: 200px;

             background-color: red;

         }

          .item2{

             width: 200px;

             height: 200px;

             background-color: yellow;

              position: absolute;

              top:200px;

              left:200px;

          }

          .item3{

             width: 200px;

             height: 200px;

             background-color: green;

         }

         .outer{

             border: 1px solid red ;

             position: relative;

         }

     </style>

 </head>

 <body>

 <div class="item1"></div>

 <div class="outer">

     <div class="item2"></div>

     <div class="item3"></div>

 </div>

 </body>

 </html>

常用设置

c. position:fixed

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .content{

             width: 100%;

             height: 1200px;

             background-color: darkgrey;

         }

         .return_top{

             width: 80px;

             height: 80px;

             background-color: burlywood;

             color: white;

             text-align: center;

             line-height: 80px;

             position: fixed;

             bottom: 20px;

             right: 20px;

         }

     </style>

 </head>

 <body>

     <div class="content"></div>

     <div class="return_top">返回顶部</div>

 </body>

 </html>

fixed 右下角定位

苑昊  苑昊

python CSS的更多相关文章

  1. Python之路-python(css布局、JavaScript)

    CSS布局 JavaScript css布局: 后台管理界面一:(左右标签都有下来菜单) 利用position: absolute;让某个标签固定在具体位置,然后使用overflow: auto;属性 ...

  2. Python之路-python(css、JavaScript)

    css JavaScript 一.CSS 分层: position: fixed;(固定到页面的具体位置) 例如:返回顶部 <!DOCTYPE html> <html lang=&q ...

  3. python css基本操作

    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  4. python css概述

    1. 概述 css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style ...

  5. python css选择器

    css 选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  6. python css功能补充讲解

    ###########总结#### 标签选择器 标签名     id选择器  #box1   类选择器.box2 css高级选择器 *子选择器* 子选择器用 大于号 .box1>.box2{ w ...

  7. selenium3 + python - css定位

    一.css:属性定位 1.css可以通过元素的id.class.标签这三个常规属性直接定位到 2.如下是百度输入框的的html代码: <input id="kw" class ...

  8. python css盒子型 浮动

    ########################总结############### 块级标签能够嵌套某些块级标签和内敛标签 内敛标签不能块级标签,只能嵌套内敛标签 嵌套就是: <div> ...

  9. python 第三方模块 转 https://github.com/masterpy/zwpy_lst

    Chardet,字符编码探测器,可以自动检测文本.网页.xml的编码. colorama,主要用来给文本添加各种颜色,并且非常简单易用. Prettytable,主要用于在终端或浏览器端构建格式化的输 ...

随机推荐

  1. 使用python UIAutomation从QQ2017(v8.9)群界面获取所有群成员详细资料,

    首先安装pip install uiautomation, 运行本文代码.或者下载https://github.com/yinkaisheng/Python-UIAutomation-for-Wind ...

  2. 重读 必须知道的.NET

    1 .public ,对访问成员无限制,属于访问级别最高的权限. protected 访问包含类或者丛类派生类的类. internal  仅限于程序集, protected inernal 访问仅限于 ...

  3. Python实现制度转换（货币，温度，长度）

    人民币和美元是世界上通用的两种货币之一,写一个程序进行货币间币值转换,其中: 人民币和美元间汇率固定为:1美元 = 6.78人民币. 程序可以接受人民币或美元输入,转换为美元或人民币输出.人民币采用R ...

  4. vuex的学习笔记

    什么是Vuex? vuex是一个专门为vue.js设计的集中式状态管理架构.状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态.简单的说就是data中需要共用的属性. ...

  5. Python十题（第2课）

    一.天天向上的力量 C 一年365天,以第1天的能力值为基数,记为1.0.当好好学习时,能力值相比前一天提高N‰:当没有学习时,由于遗忘等原因能力值相比前一天下降N‰.每天努力或放任,一年下来的能力值 ...

  6. 缺少libssl.so.4文件

    1.报错代码: /usr/local/pureftpd/sbin/pure-ftpd: error while loading shared libraries: libssl.so.4: wrong ...

  7. [poj1068]Parencodings_模拟

    Parencodings 题目大意:给你一个P序列,表示从左到右的右括号左边有多少左括号,求M序列. 注释:M序列定义为每一个右括号左边最近的没有被之前的右括号匹配的括号之间,有多少已经匹配的括号队对 ...

  8. ASP VNext 开源服务容错处理库Polly使用文档

    在进入SOA之后,我们的代码从本地方法调用变成了跨机器的通信.任何一个新技术的引入都会为我们解决特定的问题,都会带来一些新的问题.比如网络故障.依赖服务崩溃.超时.服务器内存与CPU等其它问题.正是因 ...

  9. Linux命令 ls -l s输出内容含义详解

    1. ls  只显示文件名或者文件目录 2. ls -l(这个参数是字母L的小写,不是数字1) 用来查看详细的文件资料 在某个目录下键入ls -l可能会显示如下信息: 文件属性(占10个字符空间)  ...

  10. python 函数 装饰器的使用方法

    一.装饰器  首先,我们要了解到什么是开放封闭式原则? 软件一旦上线后,对修改源代码是封闭的,对功能的扩张是开放的,所以我们应该遵循开放封闭的原则. 也就是说:我们必须找到一种解决方案,能够在不修改一 ...