python CSS

时间：2023-03-09 03:57:28
python CSS

CSS

一. css的四种引入方式 

 1.行内式

 2.嵌入式

 3. 链接式

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

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

 4.导入式

二. css选择器

1.基本选择器

　　python CSS

二.组合选择器

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 右下角定位

苑昊  苑昊

相关文章