python_day13_CSS

最新推荐文章于 2024-09-18 07:41:14 发布
最新推荐文章于 2024-09-18 07:41:14 发布
阅读量74 收藏
点赞数
文章标签： python
原文链接：https://yq.aliyun.com/articles/509218
版权

1 、CSS导入

    1.1、行内式

    1.2、㠌入式

    1.3、导入式

    1.4、链接式

2、CSS选择器

    2.1.1、*所有标签

    2.1.2、标签

    2.1.3、id号设置

    2.1.4、class选择器

    2.1.5、组合选择器

3、组合选择器

    3.1.1、多元素选择

    3.1.2、后代元素选择器

    3.1.3 子代元素选择器

    3.1.4 毗(pi)邻元素选择器

4、属性选择器

    4.1.1、匹配具有某个属性的元素    

    4.1.2、匹配所有属性等于val的元素

    4.1.3、匹配其中一个等于val的值

    4.1.4、锚定val前一个元素


CSS是Cascading Style Sheets的简称，中文称为层叠样式表，用来控制网页数据的表现，可以使网页的表现与数据内容分离。

css操作方式:

1、怎么找到标签  (如何操作html标签)

2、如何操作标签对象 (element)


1、CSS导入

   1.1、行内式

1
2
3
< body >
     < p  style = "color: black;background-color: hotpink" >hello world</ p >
</ body >

image.png

  1.2、㠌入式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< head >
     < meta  charset = "UTF-8" >
     < title >css</ title >
     < style >
         p{
             color: black;
             background-color: hotpink;
             width: 50%;
             height: 30px;
         }
     </ style >
</ head >
< body >
     < p >hello world</ p >
</ body >
</ html >

image.png

  1.3、 导入式   

1
2
3
4
5
6
7
8
9
10
11
< head >
     < meta  charset = "UTF-8" >
     < title >css</ title >
     < style >
         @import "test1.css";
     </ style >
</ head >
< body >
     < p >hello world</ p >
</ body >
</ html >

image.png

css类风格, 导入有限，并且页面在打开时，如果有延时它会先执行html内容,然后再去执行css文件, 不建议使用


  1.4、链接式

1
2
3
4
5
6
7
8
9
< head >
     < meta  charset = "UTF-8" >
     < title >css</ title >
     < link  href = "test1.css"  rel = "stylesheet" >
</ head >
< body >
     < p >hello world</ p >
</ body >
</ html >

image.png

     注意：导入式会在整个网页装载完后再装载CSS文件，因此这就导致了一个问题，如果网页比较大则会儿出现先显示无样式的页面，闪烁一下之后，再出现网页的样式。这是导入式固有的一个缺陷。使用链接式时与导入式不同的是它会以网页文件主体装载前装载CSS文件，因此显示出来的网页从一开始就是带样式的效果的，它不会象导入式那样先显示无样式的网页，然后再显示有样式的网页，这是链接式的优点。


2、css选择器

    2.1.1、*  所有的body内容都会被设置

1
2
3
4
5
6
7
8
9
< head >
     < style >
         *{ background-color: yellowgreen; }
     </ style >
</ head >
< body >
     < p >hello 1 </ p >
     < div >heelo 2</ div >
</ body >


image.png


    2.1.2、标签: 只设置自定义的标签

1
2
3
4
5
6
7
8
9
10
11
12
13
< head >
     < meta  charset = "UTF-8" >
     < title >css_chiose</ title >
     < style >
         p{
             background-color: darkblue;
         }
     </ style >
</ head >
< body >
     < p >hello 1 </ p >
     < div >heelo 2</ div >
</ body >


image.png

    2.1.3、id号设置

1
2
3
4
5
6
7
8
9
10
< head >
     < style >
         #strong{
             background-color: hotpink;
         }
     </ style >
</ head >
< body >
     < b  id = "strong" >hello b </ b >
</ body >


image.png


    2.1.4、class选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
< head >
     < meta  charset = "UTF-8" >
     < title >css_chiose</ title >
     < style >
         .twob{        # 或者b.twob
             background-color: aqua;
         }
 
     </ style >
</ head >
< body >
     < b  class = "twob" >hello b2 </ b >
</ body >

image.png


3、组合选择器


    3.1.1、多元素选择

1
2
3
4
5
6
7
8
9
10
11
12
< head >
     < style >
         .twob,#twoc{
             background-color: darkblue;
         }
 
     </ style >
</ head >
< body >
     < b  class = "twob" >hello b2 </ b >< hr >
     < b  id = "twoc" >hello b3</ b >
</ body >

image.png


    3.1.2、后代元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
< head >
     < meta  charset = "UTF-8" >
     < title >css_chiose</ title >
     < style >
         .divs p {        # 后代元素，只要元素中包含了，那么就会控制网页的改变
             color: yellow;
         }
     </ style >
</ head >
< body >
     < div  class = "divs" >
         < a  href = "" >di yi</ a >
         < div >
             < p >two</ p >
             < div >three</ div >
         </ div >
     </ div >
</ body >


image.png


    3.1.3 子代元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< head >
     < meta  charset = "UTF-8" >
     < title >css_chiose</ title >
     < style >
         .divs > p {
             color: brown;
             background-color: yellow;
         }    
     </ style >
</ head >
< body >
     < div  class = "divs" >
         < a  href = "" >di yi</ a >
         < div >
             < p >two</ p >
             < div >three</ div >
         </ div >
         < p >ok</ p >
     </ div >
</ body >

image.png    

    3.1.4 毗(pi)邻元素选择器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
< head >
     < meta  charset = "UTF-8" >
     < title >css_chiose</ title >
     < style >
         .divs + div {
             color: brown;
             background-color: yellow;
         }
 
     </ style >
</ head >
< body >
     < div >11111111111111</ div >
     < div  class = "divs" >
         < a  href = "" >di yi</ a >
         < div >
             < p >two</ p >
             < div >three</ div >
         </ div >
         < p >ok</ p >
     </ div >
 
     < div >22222222222222</ div >
</ body >

image.png

注意： 如果定义的标签与类选择或id选择不毗邻(中间还有其它标签) 那么它就不会生效。

嵌套规则：

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

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

  3. li内可以包含div

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


4、属性选择器

    4.1.1、匹配具有某个属性的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
< head >
     < meta  charset = "UTF-8" >
     < title >Title</ title >
     < style >
         [xiong]{
             color: brown;
         }
     </ style >
</ head >
< body >
         # 自定义属性名称
     < div  xiong = "xx" >hello div</ div >
</ body >

image.png

    4.1.2、匹配所有属性等于val的元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
< head >
     < meta  charset = "UTF-8" >
     < title >Title</ title >
     < style >
         # 匹配属性等于val的元素
         [xiong="yy"]{
             color: brown;
         }
     </ style >
</ head >
< body >
     < div  xiong = "xx" >hello div</ div >
     < div  xiong = "yy" >hello div2</ div >
</ body >

image.png

    4.1.3、匹配其中一个等于val的值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< html  lang = "en" >
< head >
     < meta  charset = "UTF-8" >
     < title >Title</ title >
     < style >
         [xiong~="xyz"]{
             color: brown;
         }
     </ style >
</ head >
< body >
     < div  xiong = "xx" >hello div</ div >
     < div  xiong = "yy" >hello div2</ div >
     < div  xiong = "xyz" >hello div3</ div >
</ body >

image.png  # 跟等于号 (=) 类似

    4.1.4、锚定val前一个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< head >
     < meta  charset = "UTF-8" >
     < title >Title</ title >
     < style >
         # 锚定前一个值为x的元素
         [xiong^="x"]{
             color: brown;
         }
     </ style >
</ head >
< body >
     < div  xiong = "xx" >hello div</ div >
     < div  xiong = "yy" >hello div2</ div >
     < div  xiong = "xyz" >hello div3</ div >
</ body >

image.png

    4.1.4、锚定val最后一个元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< head >
     < meta  charset = "UTF-8" >
     < title >Title</ title >
     < style >
         # 锚定最后一个值为z的元素
         [xiong$="z"]{
             color: brown;
         }
     </ style >
</ head >
< body >
     < div  xiong = "xx" >hello div</ div >
     < div  xiong = "yy" >hello div2</ div >
     < div  xiong = "xyz" >hello div3</ div >
</ body >

image.png




     本文转自812374156 51CTO博客，原文链接：http://blog.51cto.com/xiong51/2082860，如需转载请自行联系原作者



weixin_33775582
关注
Python_Django项目学习
weixin_41560737的博客
10-16 882
1.安装python3 yum -y install python3 使用python虚拟环境 python3 -m venv /opt/lzkj source /opt/lzkj/bin/activate //进入python虚拟环境 deactivate //退出虚拟环境 2.安装django source /opt/lzkj/bin/activate pip install Django 安装包 插件包 pip install pycparser pip install asn
python前端界面模板_python2.0_s12_day19_前端模版使用
weixin_39996234的博客
12-20 572
Django中引用bootstrap实现在前端可以创建客户信息,可以修改客户信息我们需要设计一个前端用户交互系统.我们在设计之前,讨论一些需求:前端实现:1. 不同角色的用户,看到的东西是不一样的销售:客户纪录能修改自己的纪录不能修改别人的纪录可以看本校区的所有客户纪录(不能修改别人的)老师:创建上课纪录,点名,批作业,管理班级学员:查看自己的成绩,交作业介绍学员建议投诉角色结合权限来实现上述需求...
python __name__怎么使用_python学习笔记26（python中__name__的使用）
weixin_40008033的博客
12-11 536
在python中，每个py文件都是一个模块，也都是一个可执行文件，即包含main方法。因此，对每个py文件，可以单独运行，也可以import它给其他客户使用，这两种情况不一样。1.如果模块是被导入，__name__的值为模块名字2.如果模块是被执行，__name__的值为’__main__’#hello.pydef sayHello():str="hello,"print(str);if __...
day14 python_css之样式
douyunqian668的博客
09-15 257
1.Css样式 ： color background-color: font:size:以像素来做的 height:50px; width:100%或者500px来设置 代码01：                     .c1{         color: red;             background-color: green;  
Python基础数据类型_Day2
weixin_45998821的博客
05-28 662
可变数据和不可变数据是相对于引用地址来说的，不可变数据类型不允许变量的值发生变化；如果改变了的变量的值，相当于新建了一个对象，而对于相同的值的对象，内部会有一个引用计数来记录有多少个变量引用了这个对象。可变数据类型允许变量的值发生变化。对变量进行修改操作只会改变变量的值，不会新建对象，变量引用的地址也不会发生变化，对于相同的值的不同对象，在内存中则会存在不同的对象，即每个对象都有自己的地址，相当于内存中对于同值的对象保存了多份，这里不存在引用计数，是实实在在的对象。
python_study
flowerqt的博客
02-24 3630
python 基础学习
【Python_00】Day_02_简单Selenium爬虫
weixin_45850382的博客
11-10 690
学习了一些简单爬虫
study_day03-Python程序设计基础
最新发布
weixin_73895683的博客
09-18 1212
什么是可迭代对象 iterable：是指可以一个一个返回其成员的对象，所有的序列类型，list,str,tuple,和一些非序列对象，比如dict,__iter__()或者实现了__getitem__()方法的任何类对象。filter：接收一个函数，和一个可迭代对象，函数的作用是对可迭代对象的每一个元素进行判断，返回Ture或False，filter根据判断的结果过滤出那些不符合条件的元素。与位置参数不同的是，关键字参数不依赖参数的位置，而是，依赖参数的名字。函数的作用域：定义了函数中变量的可见性。
day14_python Css
douyunqian668的博客
09-16 172
display:None，直接去掉那一行一行 visibllity:Noe表示留着那个行，把文字和颜色都去掉
python css选择器_Python爬虫学习笔记_BeautifulSoup-CSS选择器
weixin_39625975的博客
12-08 163
Python爬虫学习笔记_目录Berkeley Zhou：Python爬虫学习笔记_目录​zhuanlan.zhihu.comCSS类的特点爬虫练习 列表 class | 莫烦 Python.jan {background-color: yellow;}.feb {font-size: 25px;}.month {color: red;}列表 爬虫练习这是一个在 莫烦 Python 的 一月一月一...
Python 12、web前端html，css 2-2_HTMLCSS_Day02_PM.mp4
02-19
Python 12、web前端html，css 2-2_HTMLCSS_Day02_PM.mp4
Python 12、web前端html，css 1-1_HTMLCSS_Day01_AM.mp4
02-19
Python 12、web前端html，css 1-1_HTMLCSS_Day01_AM.mp4
Python 12、web前端html，css 3-1_HTMLCSS_Day03_AM.mp4
02-19
Python 12、web前端html，css 3-1_HTMLCSS_Day03_AM.mp4
python 12、web前端html，css 3-2_CSS盒模型_Day03_PM.mp4
03-13
python 12、web前端html，css 3-2_CSS盒模型_Day03_PM.mp4
starryrbs#python_note#Python项目-Day301
07-25
4.背景定位background-position属性其他属性盒子模型所有html元素都可以看做盒子CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括
Tcl lnit error: Can’t find a usable init.tcl in the following directories 问题解决
梦想闹钟
09-15 524
实际研究后发现，其实py2exe已经把打包需要的lib放在dist文件夹下了，但是打包后的程序运行后却没有去lib下找，而是去找系统自带的环境变量里找，所以找不到。这个问题出现在我用py2exe打包了一个包含tkinter的图形化界面，在当前电脑上运行无问题，在移动到新电脑上后提示报错、getcwd用于获取当前工作目录绝对路径，在设置环境的变量的时候它用的是绝对路径-所以也导致了在当前电脑上能用而移动后不能用。解决方法是在你的程序里重新设置下环境变量，而且是用相对路径的形式。
Python世界：力扣29题两数相除算法实践
来知晓的博客
09-13 544
除法运算本质是减法，从理解原理到真正实现还是有距离，建议初步理解后，不参考任何代码，完全自己复现一遍，体会更深。注意提示：目的就是提醒越界问题：-2^31/-1=2&31，超过了整数表达范围。本问题来自于力扣29题，在做完大数相乘后，顺带也看下两数相除。将两数相除，要求不使用乘法、除法和 mod 运算符。给定两个整数，被除数。
JUC从实战到源码：中断机制与API实现
qq_43843951的博客
09-12 1246
在Java中，线程中断是一种机制，用于通知线程应该停止当前正在执行的任务。中断通常用于协同线程之间的合作，以便让线程在适当的时候终止其工作，尤其是在长时间运行的任务或阻塞操作中。通过学了多线程以及synchronized的相关知识，接下来就到了学习线程中断知识。
Java企业面试题3
m0_74972727的博客
09-15 781
1. break和continue的作用(智*图) break：用于完全退出一个循环（如 for, while）或一个 switch 语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。 continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在 for 循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。 2. if分支语句和switch分支语句的异同之处(智*图) 相同点：都是用来根据不同的条件执行不同的代码块。
python css选择器
08-20
- *1* [python学习 day47之CSS选择器](https://blog.csdn.net/wuzeipero/article/details/108622643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值