pythonCSS相关

2021/9/2 17:06:07

本文主要是介绍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相关的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程