pythonweb day03

 

目录

1,CSS介绍

2,CSS使用

3,样式表特征

4,CSS 选择器

5,尺寸单位与颜色取值

6,元素分类  HTML中标签分为

7,行内元素是可以共行显示的,但是如果代码中出现了换行,页面最终效果上,行内元素之间会有空隙


CSS

1,CSS介绍

  • CSS:Cascading Style Sheet:层叠样式表
  • 作用:修饰和美化页面元素,实现网页排版布局

2,CSS使用

  在HTML文档中使用CSS 主要有三种方式

  1. 行内样式/内联样式
    特点:在具体的标签中使用style属性,引入CSS样式代码
    1. 语法:<标签 style='CSS 样式声明'>
      1. CSS 样式声明 / 语句
        1. 对当前元素添加样式
        2. 语法
          CSS 属性:值;
      2. 注意:CSS 样式声明可以是多条
        <标签 style='属性:值;属性:值;'>
    2. 常见CSS属性
      1. 设置字体大小
        1. 属性 font-size
        2. 取值 以像素为单位的数值,浏览器默认的字体大小是16px
          et:
          <div style='font-size:20px;'> CSS 介绍</div>
      2. 设置字体颜色
        1. 属性 color
        2. 取值 颜色的英文单词
          et:
          <div style='color:red;'>使用</div>
      3. 设置背景颜色
        1. background-color
        2. 取值颜色的英文单词
  2. 文档内嵌 / 内部样式表
    特点:将CSS代码与具体的标签相分离,在HTML 文档中使用<style></style>标签引入CSS代码
    语法:
    <style>
        选择器1
        选择器2
        选择器3
        ...
    </style>

    选择器:
    1. 使用文档内嵌方式引入CSS样式表时,实现了结构与样式相分离,但是需要自己定义选择器来匹配文档中元素,为其应用样式
      作用:匹配文档元素为其应用样式
    2. 语法:
      选择器实际上由两部分组成
      选择器(符){
      属性 : 值;
      属性 : 值;
      }
      et:
      标签选择器 / 元素选择器:
      使用标签名作为选择符,匹配文档中所有的该标签,并应用样式
      p {
          color :green;
          font-size :20px;
      }

      注意:<style></style> 可以书写在文档中的任意位置,但是基本样式优选的选择,一般写在<head></head>中
      <!DOCTYPE html>
      <html>
      <head>
      	<title></title>
      	<meta charset="utf-8">
      
      	<!-- 3. 引入外部的样式表文件 -->
      	<link rel="stylesheet" type="text/css" href="index.css">
      	<style type="text/css">
      		/*2. 文档内嵌方式*/
      		/*标签选择器*/
      		p {
      			color: green;
      		}
      	</style>
      
      </head>
      <body>
      	<!-- 1. 行内样式 -->
      	<p style="color:red;">普通文本p</p>
      	<p>普通文本p</p>
      	<h1>一级标题 默认32px</h1>
      	<div style="font-size:32px; color:red; background-color: pink;">
      		添加样式的文本
      		<p>div中的普通文本p</p>
      	</div>
      	<p>普通文本p</p>
      </body>
      </html>

       

  3. 外链方式 / 外部样式表
    1. 定义外部的.css文件. 在HTML中引入即可,真正实现文档与样式表的分离
    2. 语法:
      在外部的样式表中使用选择器定义样式:
      在HTML文档中使用<link>引入CSS文件
      et:<link rel="stylesheet" href="url">
      /*书写选择器*/
      /*接上一提,地址index.css*/
      h1{
      	background-color: yellow;
      	color: blue;
      }
      p{
      	color:orange;
      }

       

3,样式表特征

  1. 继承性
    大部分的CSS属性都是可以被继承的
    子元素或者后代元素可以继承父元素中的样式
    et:
    所有的文本属性都可以被继承
    块元素的宽度与父元素保持一致
  2. 层叠性
    允许为元素定义多个样式,共同起作用
    et:
    p{
        color:red;
        background-color:blue;
    }
  3. 样式表的优先级
    从低到高:
    1. 浏览器缺省设置:浏览器默认样式
    2. 文档内嵌 / 外链方式:在不发生样式冲突时,样式共同起作用:
      如果发生样式冲突,后来者居上,最后定义的样式最终显示
    3. 行内样式的优先级最高

4,CSS 选择器

  1. 作用:规范页面中哪些元素能够应用声明好的样式
    目的:匹配页面元素
  2. 详解
    1. 标签选择器 / 元素选择器
      特点:将标签名作为选择符,来匹配文档中所有的该标签,包含了后代元素
      语法:
      标签名{
          属性:值;
      }
      练习:
      新建文件 tag-selector.html
      创建超链接标签
      设置超链接文本色为红色
      取消下划线 text-decoration:none;
      <!DOCTYPE html>
      <html>
      <head>
      	<title></title>
      	<meta charset="utf-8">
      	<style type="text/css">
      		a{
      			color: red;
      			text-decoration: none;
      		}
      	</style>
      
      		
      </head>
      <body>
      	<a href="#">百度</a>
      
      </body>
      </html>

       

    2. 类选择器
      特点:通过元素的class属性值进行匹配
      语法:
      .c1{
          样式
      }
      <p class='c1'><p 文本</p>
      以英文 . 开头,跟上class属性值,中间没有空格
      练习:
      1. 创建文件class-sedsadot
        创建几个元素div p span h1
        使用类选择器为上述元素添加样式
        1. 文本大小为24px
        2. 背景颜色为橘色
        3. 文本斜体显示font-style:itelic;
          示例:
      2. 类选择器的结合使用
        1. 标签名,类名
          中间没有空格
          表示在指定的标签中匹配class属性值相对应的元素
          p.c1{
          
          
          
          }
          注意:标签名一定要写在前面,
          et:.clp查找类名为clp的元素
        2. .类名1.类名2(不常用)
        3. 标签中使用两个类选择器的样式
          <p class="类名1 类名2">
          <!DOCTYPE html>
          <html>
          <head>
          	<title></title>
          	<meta charset="utf-8">
          	<style type="text/css">
          		.c1{
          			font-size: 24px;
          			background-color: orange;
          			font-style: italic;
          		}
          		.c2{
          			text-decoration: underline;
          		}
          		h1.c1{
          			color:red;
          		}
          	</style>
          
          </head>
          <body>
          	<h1 class="c1 c2">类选择器</h1>
          	<div class="c1">div文本</div>
          	<p class="c1">p文本内容</p>
          	<span class="c1">span文本</span>
          </body>
          </html>

           

    3. ID选择器
      1. id作用
        HTML中所有的元素都有一个id属性,主要用来表示该元素在文档中的标志,具有唯一性
      2. id选择器
        通过元素的id属性值进行匹配
        语法:
        #id属性值{
            样式
        }

        注意:通常网页中外围的结构化标签,都使用id进行标识,具有唯一性
        et:
        #nav{
        
        }
        
        <div id='nav'>导航条</div>

        练习:
        创建文件xxxxx
        创建div,设置id属性值为nav
        使用id选择器添加样式
        width:100%;
        height:50px;
        background-color: pink;
        <!DOCTYPE html>
        <html>
        <head>
        	<title></title>
        	<meta charset="utf-8">
        	<style type="text/css">
        		#nav{
        			width:100%;
        			height:50px;
        			background-color: pink;
        		}
        	</style>
        
        </head>
        <body>
        	<div id="nav">导航条</div>
        	<!-- <h1 id="nav"></h1> -->
        </body>
        </html>

         

    4. 群组选择器
      1. 作用 :为多个选择器设置共同的样式

      2. 语法 :
        选择器1,选择器2,选择器3
         

        选择器1,选择器2,选择器3,{
            样式
        }
        div,h1,p{
            color : gray;
        }
        
        <div></div>
        <h1></h1>
        <p></p>
    5. 后代选择器

      1. 作用
        依托于元素的后代关系来匹配元素(既包含直接子元素,也包含后代元素)

      2. 语法
        选择器1 选择器2{

        }
        在选择器1对应的元素中匹配后代元素,后代元素需满足选择器2

        et :
        #nav span{

                            }
        匹配#nav下的所有span元素
         

    6. 子代选择器

      1.  作用 :依托元素的子代关系进行匹配,
        只匹配直接子元素

      2.  语法
        选择器1>选择器2 {

        }
        在选择器1对应的元素中匹配直接子元素,满足选择器2的要求
        et :

        #nav>ul>li{
        
        }
        <!DOCTYPE html>
        <html>
        <head>
        	<title></title>
        	<meta charset="utf-8">
        	<style type="text/css">
        		#nav,#main,#footer{
        			width: 800px;
        			color: red;
        			/*为元素设置边框 :宽度 颜色 样式*/
        			border: 1px solid green;
        		}
        		/*#nav li{
        			color: blue;
        		}*/
        		#nav>ul>li{
        			text-decoration: underline;
        		}
        	</style>
        </head>
        <body>
        	<!-- 群组选择器 -->
        	<div id="nav">
        		<ul>
        			<li>首页
        				<ol>
        					<li>登录</li>
        					<li>注册</li>
        				</ol>
        			</li>
        			<li>男装</li>
        			<li>女装</li>
        		</ul>
        	</div>
        	<div id="main">主要内容</div>
        	<div id="footer">页面尾部</div>
        </body>
        </html>

         

    7. 伪类选择器

      1. 分类 :

        1. 超链接伪类选择器

        2. 动态伪类选择器

      2. 作用 :
        主要是针对元素的不同状态去设置样式

        1.  超链接的不同状态
          访问前 :link
          访问后 :visited
          激活(鼠标点按不松):active
          鼠标滑过 :hover

        2. 其他元素具备 
          鼠标滑过  :hover
          鼠标点按  :active

        3. 表单控件
          获取到焦点时的状态 :focus
          对文本框和密码框而言,当用户点击输入时,都视为获取焦点状态

      3. 伪类选择器需要与其他选择器结合使用,设置元素在不同状态下的样式

        a:link{
            color :black;
            text-decoration :none;
        }

         

      4. 注意 :
        如果要给超链接添加四中状态下的样式,必须按照以下顺序书写伪类选择器
        :link
        :visited
        :hover
        :active
        简称 “爱恨原则 LoVe / HAte ”
         

        <!DOCTYPE html>
        <html>
        <head>
        	<title></title>
        	<meta charset="utf-8">
        	<style type="text/css">
        		/*超链接伪类选择器*/
        		a:link{
        			color:black;
        			text-decoration: none;
        		}
        		a:visited{
        			color:orange;
        			/*text-decoration: underline;*/
        		}
        		/*动态伪类选择器,表示超链接的其他状态*/
        		a:hover{
        			background-color: red;
        		}
        		a:active{
        			color:blue;
        		}
        		div{
        			width: 200px;
        			height: 200px;
        			background-color: red;
        		}
        		div:hover{
        			width: 300px;
        			height: 300px;
        		}
        		input:focus{
        			/* 取消轮廓线*/
        			outline: none;
        		}
        
        	</style>
        </head>
        <body>
        	<a href="#">百度</a>
        	<div></div>
        	<input type="text" name="uname">
        </body>
        </html>

        综合示例:
         

        <!DOCTYPE html>
        <html>
        <head>
        	<title></title>
        	<meta charset="utf-8">
        	<style type="text/css">
        		#nav{
        			background-color: pink;
        		}
        		a{
        			color: black;
        			text-decoration: none;
        		}
        		a:hover{
        			font-weight: bold;
        			font-size: 20px;
        		}
        		#nav2{
        			width: 900px;
        			height : 50px;
        			background-color: pink;
        		}
        		#nav2 td{
        			width: 150px;
        			height: 50px;
        			background-color: orange;
        			/*内容水平居中*/
        			text-align: center;
        		}
        
        
        
        
        	</style>
        </head>
        <body>
        	<!-- 创建导航栏 -->
        	<div id="nav">
        		<a href="#">首页</a>
        		<a href="#">男装</a>
        		<a href="#">女装</a>
        		<a href="#">首页</a>
        		<a href="#">男装</a>
        		<a href="#">女装</a>
        	</div>
        	<div id="nav2">
        		<table>
        			<tr>
        				<td><a href="#">首页</a></td>
        				<td><a href="#">男装</a></td>
        				<td><a href="#">女装</a></td>
        				<td><a href="#">首页</a></td>
        				<td><a href="#">男装</a></td>
        				<td><a href="#">女装</a></td>
        			</tr>
        		</table>
        	</div>
        </body>
        </html>

         

  3. 选择器的优先级
    当多个选择器的样式同时应用到一个元素上时,要按照不同选择器的优先级来应用样式
    判断选择器的优先级,主要看选择器的权重(权值)数值越大,优先级越高

    选择器权值
    标签选择器1
    类选择器/伪类10
    id选择器100
    行内样式1000

    如果是复杂的选择器(后代,子代),选择器最终的权值是各选择器权值之和
    简单示例:
     

    <div id="nav">
        <ul>
            <li></li>
        </ul>
    </div>
    
    #nav li{ --101
        color: green;
    }
    div li{ --2
        color: red;
    }
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		h1{
    			color: red;
    		}
    		.c1{
    			color:green;
    		}
    		#box h1{
    			color: blue;
    		}
    		#box .c1{
    			color: orange;
    		}
    	</style>
    
    </head>
    <body>
    	<div id="box">
    		<h1 class='c1' style="color: yellow;">大标题</h1>
    	</div>
    </body>
    </html>
    <!-- 颜色优先yellow orange blue green red -->

     

5,尺寸单位与颜色取值

  1. 尺寸单位
    1.  px - 像素单位,默认单位
    2.  %  - 参照父元素对应属性的值进行获取
      --------
    3.  in -inch 英寸 1in = 2.54cm
    4.  pt -磅 1pt = 1/72 in
    5. cm
    6. mm
  2. 颜色表示方式
    1.  英文单词
    2. rgb(r,g,b)表示颜色
      每一种三原色的取值范围 :0 - 255
      et :
      红色 :rgb(255,0,0);
      黑色 :rgb(0,0,0);
      白色 :rgb(255,255,255);
    3. rgba(r,g,b,alpha)
      设置颜色,还可以调整透明度
      三原色的取值范围 0 - 255
      alpha 透明度的取值  0 - 1
      0 :表示透明
      1 :表示不透明
      取小数表示半透明,整数部分的0可以省略不写
      0.5  / .5
    4. 十六进制表示颜色
      三原色 取值 0 - 255
      转换为十六进制
      十六进制取值范围 0-9 a-f
      表示颜色
      1. 长十六进制 6位表示方法
        每两位为一组,代表一种三原色
        表示红色 
         #ff0000
        黑色 #000000
        白色 #ffffff
        其他颜色 :#643a1f
      2. 短十六进制 3位表示方式
        浏览器会自动对每一位进行重复补全,最终补全为长十六进制
        红色 :#f00 ->#ff0000
        黑色 :#000
        白色 :#fff
        <!DOCTYPE html>
        <html>
        <head>
        	<title></title>
        	<meta charset="utf-8">
        	<style type="text/css">
        		#box{
        			width: 80%;
        			background-color: rgb(255,0,0);
        			height: 50px;
        		}
        		h1{
        			/*#00ff00;*/
        			background-color: rgba(0,255,0,0.7);
        			width: 50%;
        		}
        	</style>
        </head>
        <body>
        	<div id="box">
        		<h1>一级标题</h1>
        	</div>
        
        </body>
        </html>

         

6,元素分类
  HTML中标签分为

  1. 块元素
                特点 :
                    1. 独占一行,不与其他元素共行显示
                    2. 可以手动设置宽高
                et : div h1 p ul ol table form
  2. 行内元素
                特点 :
                    1. 可以与其他元素或者文本共行显示
                    2. 不能手动设置宽高,元素的大小由内容决定
                et : span i b label u s sub sup
  3. 行内块元素
                特点 :
                    既可以与其他元素共行显示,也可以手动设置宽高
                et : img input
                属性 :
                    可以通过 vertical-align设置行内块元素左右元素与其的垂直对齐方式
                    取值 : top / middle / bottom
                注意 :vertical-align只在行内块元素中使用

7,行内元素是可以共行显示的,但是如果代码中出现了换行,页面最终效果上,行内元素之间会有空隙

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
		div{
			width: 500px;
			height: 100px;
			background-color: red;
		}
		span{
			width: 500px;
			height: 50px;
			background-color: pink;
		}
		img{
			width: 200px;
			height :200px;
			/*设置图片左右元素与图片垂直对齐*/
			vertical-align: bottom;
		}
		.c1{
			width: 200px;
			height: 100px;
			vertical-align: bottom;
		}
		.c2{
			width: 100px;
			height: 50px;
			vertical-align: bottom;
		}
	</style>
</head>
<body>
	<!-- 1. 块级元素 -->
	<div>
		块元素 :独占一行,可以设置宽高
	</div>
	<!-- 2. 行内元素 -->
	<span>
		行内元素 :可以与其他元素共行,不能手动设置宽高,尺寸由内容自适应
	</span>
	<label>行内元素label</label>

	<!-- 3, 行内块元素 -->
	<b>加粗</b>
	<img src="../day01/img/cat.jpg">
	<img src="../day01/img/cat.jpg">
	<img src="../day01/img/cat.jpg">
	<b>加粗标签</b>
	<input type="text" name="uname" class="c1">
	<input type="radio" name="" class="c2">
	<input type="submit" name="" class="c2">
	<label>xxx</label><label>xxx</label>
	<label>xxx</label>
</body>
</html>

 

 

 

 

 

 

 

 

 

 

 

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
根据引用的代码,这段代码是使用和feffery_antd_components库来创建一个Web应用程序。其中包含了一个基于AntdAvatar的头像组件的示例。AntdAvatar有三种模式:icon、text和image。模式为icon时,可以设置背景颜色;模式为text时,可以设置显示的文本;模式为image时,可以设置显示的图片。此外,还可以根据需要设置头像的尺寸大小。这段代码主要是展示了AntdAvatar的使用方法和参数。 引用中提到,feffery_antd_components是费弗里老师开发的一个前端组件库。根据作者的描述,如果你不是前端开发工程师,暂时不想或没有时间深入前端技术的学习,使用feffery_antd_components比Vue更合适。 引用中提到了一种基于人脸实时特征点的驱动方法,用于生成avatar。这段引用的内容与前两个引用的内容没有直接关联,可能是关于avatar在Python中的使用的更深入的技术讨论。但是由于没有提供具体的问题,我无法给出更具体的回答。如果您有关于avatar在Python中的问题,请提供更具体的问题描述,我将尽力为您解答。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [【Python百日进阶-Web开发-Feffery】Day343 - fac数据展示01:AntdAvatar头像(阿凡达)](https://blog.csdn.net/yuetaope/article/details/123549417)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *3* [python+人脸识别+opencv实现真实人脸驱动的阿凡达(中)](https://blog.csdn.net/kanbide/article/details/128352591)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值