当前位置： 首页>前端>正文

Python中css定位新用法 python调用css

前端2024-05-16 18:05:41

一、CSS 语法介绍

一.CSS介绍

  • CSS全称为:Cascading Style Sheets,意为层叠样式表,与HTML相辅相成,实现网页的排版布局与样式美化

二.CSS使用方式

1.行内样式/内联样式

  • 借助于style标签属性,为当前的元素添加样式声明,CSS样式声明由CSS属性和值组成:style="属性:值;属性:值;"
  • 语法:<标签名 style=“样式声明”>
  • 常用CSS属性:
  • 设置文本颜色 color:red;
  • 设置背景颜色 background-color:green;
  • 设置字体大小 font-size:32px;

2.内嵌样式

  • 借助于style标签,在HTML文档中嵌入CSS样式代码,可以实现CSS样式与HTML标签之间的分离。同时需借助于CSS选择器到HTML 中匹配元素并应用样式
示例:
<style>
    选择器{
        属性:值;
        属性:值;
    }
</style>
  • 选择器:通过标签名或者某些属性值到页面中选取相应的元素,为其应用样式
示例:
<!--标签选择器:根据标签名匹配所有的该元素-->
<style>
    p{
        color:red;
    }
</style>

3.外链样式表

  • 创建外部样式表文件 后缀使用.css ,在HTML文件中使用标签引入外部样式表
  • 样式表文件中借助选择器匹配元素应用样式
<link rel="stylesheet" href="URL" type="text/css">

三.样式表特征

1.层叠性

  • 多组CSS样式共同作用于一个元素

2.继承性

  • 后代元素可以继承祖先元素中的某些样式
    例:大部分的文本属性都可以被继承

3.样式表的优先级

  • 优先级用来解决样式冲突问题。同一个元素的同一个样式(例如文本色),在不同地方多次进行设置,最终选用哪一种样式?此时哪一种样式表的优先级高选用哪一种。
  1. 行内样式的优先级最高
  2. 文档内嵌与外链样式表,优先级一致,看代码书写顺序,后来者居上
  3. 浏览器默认样式和继承样式优先级较低

四.CSS 选择器

1.作用

  • 匹配文档中的某些元素为其应用样式

2.CSS 选择器分类

1.标签选择器
  • 根据标签名匹配文档中所有该元素
语法:
标签名{
    属性:值;
}
2.id选择器
  • 根据元素的 id名 匹配文档中惟一的元素,id具有唯一性,不能重复使用
  • 注意:id属性值自定义,可以由数字,字母,下划线,- 组成,不能以数字开头; 尽量见名知意,多个单词组成时,可以使用连接符,下划线,小驼峰(首字母大写)表示
语法:
#id名{
    属性:值
}
3.class选择器(类选择器)
  • 根据元素的className匹配相应的元素,className可以重复使用,实现样式的复用
语法:
.className {
    属性:值
}
  • 特殊用法 :
  1. 类选择器与其他选择器结合使用注意标签与类选择器结合时,标签在前,类选择器在后
例:
<style>
    a.c1{
        属性主体
    }
</style>
  1. class属性值可以写多个,共同应用类选择器的样式
<style>
    .c1{ }
    .c2{ }
</style>
    <p class="c1 c2">
4.群组选择器
  • 为一组元素统一设置样式
语法:
<style>
    selector1,selector2,selector3{
    }
</style>
5.后代选择器
  • 匹配满足选择器的所有后代元素(包含直接子元素和间接子元素)
示例:匹配selector1中所有满足selector2的后代元素
<style>
    selector1 selector2{
    }
</style>
6.子代选择器
  • 匹配满足选择器的所有直接子元素
语法:
<style>
    selector1>selector2{
    }
</style>
7.伪类选择器(鼠标划过,点按)
  • 为元素的不同状态分别设置样式,必须与基础选择器结合使用
分类:
<style>
    :link 超链接访问前的状态
    :visited 超链接访问后的状态
    :hover 鼠标滑过时的状态
    :active 鼠标点按不抬起时的状态(激活)
    :focus 焦点状态(文本框被编辑时就称为获取焦点)
</style>
使用:
<style>
    a:link{
    }
    a:visited{
    }
    .c1:hover{
    }
</style>
  • 注意 :
  1. 超链接如果需要为四种状态分别设置样式,必须按照以下顺序书写
<style>
    :link
    :visited
    :hover
    :active
</style>
  1. 超链接常用设置
<style>
    a{
    /*统一设置超链接默认样式(不分状态)*/
    }
    a:hover{
    /*鼠标滑过时改样式*/
    }
</style>

3.选择器的优先级

  • 使用选择器为元素设置样式,发生样式冲突时,主要看选择器的权重,权重越大,优先级越高

选择器

权重

标签选择器

1

(伪)类选择器

10

id选择器

100

行内样式

1000+

  • 复杂选择器(后代,子代,伪类)最终的权重为各个选择器权重值之和群组选择器权重以每个选择器单独的权重为准,不进行相加计算
例:
<style>
    /*群组选择器之间互相独立,不影响优先级*/
    body,h1,p{ /*标签选择器权重为 1 */
        color:red;
    }
    .c1 a{ /*当前组合选择器权重为 10+1*/
        color:green;
    }
    #d1>.c2{ /*当前组合选择器权重为 100+10 */
        color:blue;
    }
</style>

五.标签分类及嵌套

1.块元素(独占一行,设置宽高)

  • 独占一行,不与其他元素共行;可以手动设置宽高,默认情况下宽度与父元素保持一致
例:
body div h1~h6 p ul ol li form,
table(默认尺寸由内容决定)

2.行内元素(共行显示,不能设置宽高)

  • 可以与其他元素共行显示;不能手动设置宽高,尺寸由内容决定
例:
span label b strong i s u sub sup a

3.行内块元素(共行显示,设置宽高)

  • 可以与其他元素共行显示,又能手动调整宽高
例:
img input button (表单控件)
  • 注:行内元素与行内块元素默认按照文本的基础线对齐,可以通过vertical-align:value设置元素之间的垂直对齐方式
  • value取top/middle/bottom添加给行内块元素上,调整左右元素与当前元素的垂直对齐方式

4.嵌套原则

1.块元素中可以嵌套任意类型的元素
  • 注:p元素除外,段落标签只能嵌套行内元素,不能嵌套块元素
2.行内元素中最好只嵌套行内或行内块元素



https://www.xamrdz.com/web/29g1960074.html

相关文章：