pythonCSS相关

2021/9/2 17:06:07

编程Tag： 选择器属性元素字体 Font color 相关 pythonCSS

本文主要是介绍pythonCSS相关，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

CSS样式

引入方式

行内式标签内设置样式
嵌入式在head内设置
链接式新建一个css文件 <links rel="stylesheet" href="common.css">

选择器

基本选择器

标签选择器

div{
     color: red;
 }

id选择器

#i1{
     color: red;
 }

class选择器

.c1{
     color: red;
 }

通配选择器

*{
     color: red;
 }

组合选择器

后代选择器

.c1 .c2{
     color: red;
 }

子代选择器

.c1 > .c3{
     color: red;
 }

与或选择器

与 .

div.c1{
     color: red;
 }

或 ,

div.c1,p{
     color: red;
 }

兄弟选择器

代码自上向下执行

毗邻兄弟标签 +

.c2 + c3{
     color: red;
 }

普通兄弟选择器 ~

.c2 ~ div{
     color: red;
 }

属性选择器

class属性用法 class 可以设置多个值可以同时拥有多个样式

.c1{
     color: red;
     font-size: 32px;
 }
 .c2{
     background-color: #3ca0ec;
 }
 
 
 <div class="c1">item1</div>
 <div class="c1 c2">item2</div>

[属性]

[type="text"]{
             border:1px solid #3C82F6;
         }
 
 
 <input type="text">
 <input type="password">

E[属性] 指定元素内的属性的标签

li[href*="jpg"]{
     color: red
 }
 
 <li><a href="1.png">item1</a></li>
 <li><a href="2.jpg">item2</a></li>
 <li><a href="3.jpg">item3</a></li>
 <li><a href="4.png">item4</a></li>
 <li><a href="5.gif">item5</a></li>

上述实例表示：li标签内包含jpg的标签设置红色

^	以指定内容开头的元素
$	以指定内容结尾的元素
*	包含指定内容的元素

伪类选择器

anchor伪类：专用于控制链接的显示效果

:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已被访问的链接。
:active	a:active	选择活动链接。
:hover	a:hover	选择鼠标指针位于其上的链接。

before after伪类

:first-child	p:first-child	选择属于父元素的第一个子元素的每个 <p> 元素。
:last-child	p:last-child	选择属于其父元素最后一个子元素每个 <p> 元素。
:before	p:before	在每个 <p> 元素的内容之前插入内容。
:after	p:after	在每个 <p> 元素的内容之后插入内容。

样式继承

子类标签没有设置样式的话，父类设置了样式，子标签会继承父类的标签

常用属性

文本相关属性
font-family	font-size	letter-spacing	line-height
font-style	font-variant	text-align	text-indent
font-weight	font	text-transform	word-spacing
color	direction
列表相关属性
list-style-image	list-style-position	list-style-type	list-style
表格和其他相关属性
border-collapse	border-spacing	caption-side	empty-cells
cursor

选择器优先级

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

如果优先权一样，则按照在源码中出现的顺序决定，最后设置的样式决定样式。

CSS的属性操作

文本属性

font-style（字体样式风格）

/*
 属性值：
 normal：设置字体样式为正体。默认值。 
 italic：设置字体样式为斜体。这是选择字体库中的斜体字。
 oblique：设置字体样式为斜体。人为的使文字倾斜，而不是去使用字体库的斜体字。
 */

font-weight（字体粗细）

/*
 属性值：
 normal：设置字体为正常字体。相当于数字值400
 bold：设置字体为粗体。相当于数字值700。
 bolder：设置字体为比父级元素字体更粗的字体。
 lighter：设置字体为比父级元素字体更细的字体。
 number：用数字表示字体粗细。从小到大，越来约粗，取值范围：100、200、300、400、500、600、700、800、900。
 注意：
 font-weight的常用值有两个normal和bold，其他的值在浏览器中的支持并不好。
 */

font-size（字体大小）

/*
 font-size的值有很多，有xx-small、x-small、small、medium、large、x-large、xx-large、smaller和larger，
也可以设置值为具体的数值加上对应的计算单位来表示字体的大小。字体单位有像素（ px ）、
字符（ em，默认1em等于16px，2em等于32px，根据不同浏览器的默认字体大小而决定 ）、百分比（ % ），
磅[点]（ pt ）。
 字体不指定大小时，主流浏览器默认是15像素到16像素。旧版本的谷歌浏览器，字体最小只能设置成12像素，
新版已经修复。*/

font-family（字体族）

/*
 font-family可以指定元素使用的字体系列或字体族。当我们使用font-family指定字体族的时候，
 可以指定多种字体,作为候补。指定多个字体的时候，需要使用逗号隔开。
 如果css中没有声明当前内容使用的字体族的时候，默认：
     中文：  宋体 [ win7以后默认是 微软雅黑 ]
     英文：  Arial
 */

color（字体颜色）

// 可以使用color来表示字体的颜色，颜色值最常用的有三种形式，英文单词，十六进制，RGB十进制。
更高级的有 RGBA、HSL、HSLA，不过低版本的浏览器并不支持。

text-align（文本对齐方式）

左对齐left、居中对齐center、右对齐right。justify 实现两端对齐文本效果。

line-height（字体行高）

设置文本居中

.c1{
     width: 200px;
     color: red;
     font-size: 32px;
 }
 .c2{
     background-color: #3ca0ec;
     line-height:200px;    # 设置标签的中字体行高等于外侧块的行高
     text-align: center;   # 文本居中
 }

vertical-align 属性设置元素的垂直对齐方式。
text-decoration 常用的值none，underline，overline，line-through

背景属性

background: 背景颜色  背景图片  背景平铺方式  背景定位;

边框属性

border: 边框宽度 边框样式 边框颜色;

列表属性

li{
 list-style: none;
 }

dispaly属性

/*
 display: block;         // 声明当前元素的显示模式为块状元素
 display: inline;        // 声明当前元素的显示模式为行内元素
 display: inline-block;   // 声明当前元素的显示模式为行内块状元素
 display: none;          // 声明当前元素的显示模式为隐藏 
 */

盒子模型

padding（内边距及其缩写）

/*
 当padding只有一个值的时候表示同时控制上下左右的内边距。
 当padding只有两个值的时候表示分别控制上下、左右的内边距。
 当padding有三个值的时候表示分别控制上、左右、下的内边距。
 当padding有四个只的时候表示分别控制上、右、下、左的内边距。
 */

/*
 padding-top             设置上边的外边距
 padding -bottom         设置下边的外边距
 padding -left           设置左边的外边距
 padding -right          设置右边的外边距
 */

margin（外边距及其缩写）
- 使用margin让元素自身居中： margin: 0 auto;
- 一个元素相对于父级元素作水平居中时，可以借助margin的特性来实现。

float属性

流动布局（文档流）
浮动模型

float: left; 左漂浮

float: right; 右漂浮
字围效果

对图片标签设置float: left;

清除浮动

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。

清除浮动解决父级塌陷

.clearfix:after {                         /*在类名为“clearfix”的元素内最后面加入内容*/
             content: ".";                    /*内容为“.”就是一个英文的句号而已。也可以不写。*/
             display: block;                  /*加入的这个元素转换为块级元素。*/
             clear: both;                     /*清除左右两边浮动。*/
             visibility: hidden;              /*可见度设为隐藏。注意它和display:none;是有区别的。*/
                                               /* visibility:hidden;仍然占据空间，只是看不到而已；*/
             line-height: 0;                  /*行高为0；*/
             height: 0;                       /*高度为0；*/
             font-size:0;                     /*字体大小为0；*/
         }
  
 
 整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
 之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
 <div class="head clearfix"></div>

position属性

相对定位（relative）元素相对自身位置使用left、right、top、bottom属性进行定位偏移
```
position: relative;
 left: 200px;
 top: 200px;
```
上述是相对自身的左位移200像素上位移200像素

绝对定位（absolute）绝对定位就是将元素脱离文档流，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父级元素进行绝对定位，如果不存在这样的父级元素，则默认是相对于body元素进行绝对定位。

轮番图案例

<!DOCTYPE HTML>
 <html lang="en-US">
   <head>
         <meta charset="utf8">
         <style>
 
             *{
                 margin: 0;
                 padding: 0;
             }
 
             .lunbo{
                 width: 590px;
                 height: 470px;
                 border: 1px solid rebeccapurple;
                 margin: 100px auto;
                 position: relative;
             }
 
             .lunbo ul{
                 list-style: none;
             }
 
             .lunbo .img li{
                 position: absolute;
                 top: 0;
                 left: 0;
             }
 
             .lunbo .btn li{
 
                 font-size: 25px;
                 width: 40px;
                 height: 40px;
                 background-color: gray;
                 text-align: center;
                 line-height: 40px;
                 border-bottom-right-radius: 50%;
                 border-top-right-radius: 50%;
                 color: white;
 
                 position: absolute;
                 top: 50%;
                 margin-top: -20px;
 
             }
 
             .lunbo .left_btn{
                 left: 0;
             }
 
             .lunbo .right_btn{
                 right: 0;
             }
         </style>
   </head>
   <body>
 
 
   <div class="lunbo">
       <ul class="img">
           <li><a href=""><img src="imgs/1.jpg" alt=""></a></li>
           <li><a href=""><img src="imgs/2.jpg" alt=""></a></li>
           <li><a href=""><img src="imgs/3.jpg" alt=""></a></li>
           <li><a href=""><img src="imgs/4.jpg" alt=""></a></li>
           <li><a href=""><img src="imgs/5.jpg" alt=""></a></li>
       </ul>
       <ul class="btn">
           <li class="left_btn"> < </li>
           <li class="right_btn"> > </li>
       </ul>
   </div>
   </body>
 </html>

固定定位（fixed）相对窗口定位，不受滚动条影响，不受文档流影响

例如：返回顶部小窗口

这篇关于pythonCSS相关的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！