python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)
11.38 css三大特性
11.381 继承性
1、定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性
2、注意:
1、只有以color、font-、text-、line-开头的属性才可以继承
2、a标签的文字颜色和下划线是不能继承别人的
3、h标签的文字大小是不能继承别人的,会改变,但是会在原来字体大小的基础上改变
ps:打开浏览器审查元素可以看到一些inherited from...的属性
3、应用场景:
通常基于继承性统一设置网页的文字颜色,字体,文字大小等样式
11.382 层叠性
定义:CSS全称:Cascading StyleSheet层叠样式表,层叠性指的就是CSS处理冲突的一种能力,即如果有多个选择器选中了同一个标签那么会有覆盖效果
注意:
1、层叠性只有在多个选择器选中了同一个标签,然后设置了相同的属性,才会发生层叠性
11.383 优先级
1、定义:当多个选择器选中同一个标签,并且给同一个标签设置相同的属性时,如何层叠就由优先级来确定
2、优先级
整体优先级从高到底:行内样式>嵌入样式>外部样式
1、大前提:直接选中 > 间接选中(即继承而来的)
2、如果都是间接选中,那么离目标标签比较近的优先级高,就近原则
3、如果都是直接选中,并且都是同类型的选择器,那么写在后面的优先级高
4、如果都是直接选中,并且是不同类型的选择器,那么就会按照选择器的优先级来层叠
#内联>id > 类 > 标签 > 通配符(也算直接选中) > 继承 > 浏览器默认(即没有设置任何属性)
5、优先级之!important
!important方式来强制指定的属性的优先级提升为最高,但是不推荐使用。因为大量使用!important的代码是无法维护的。
注意:
1、!important只能用于直接选中,不能用于间接选中
2、!important只能用于提升被指定的属性的优先级,其他属性的优先级不会被提升
3、!important必须写在属性值分号的前面
11.39 字体属性
1、font-weight:文字粗细(字重)
normal 默认值,标准粗细
bord 粗体
border 更粗
lighter 更细
100~900 设置具体粗细,400等同于normal,而700等同于bold
inherit 继承父元素字体的粗细值
2、font-style:文字风格
normal 正常,默认就是正常
italic 倾斜
3、font-size:文字大小
一般是12px或13px或14px
注意:
1、通过font-size设置文字大小一定要带单位,即一定要写px
2、如果设置成inherit表示继承父元素的字体大小值。
4、font-family:文字字体
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif #按照顺序依次选取用户可用的字体
常见字体:
serif 衬线字体
sans-serif 非衬线字体
中文:宋体,微软雅黑,黑体
注意: 1、设置的字体必须是用户电脑里已经安装的字体,浏览器会使用它可识别的第一个值。 2、如果取值为中文,需要用单或双引号扩起来
5、文字属性简写
font-weight: bolder;
font-style: italic;
font-size: 50px;
font-family: 'serif','微软雅黑';
简写为:
font: bolder italic 50px 'serif','微软雅黑';
6、color:文字颜色
格式 | 描述 | |
---|---|---|
rgb | color:rgb(255,0,0); | 红色:rgb(255,0,0) 绿色:rgb(0,255,0) 蓝色:rgb(0,0,255) 黑色:rgb(0,0,0) # 所有都不亮 白色:rgb(255,255,255) # 所有都最亮 灰色:只要让红色/绿色/蓝色的值都一样就是灰色而且三个值越小越偏黑色越大越偏白色 |
rgba | color:rgba(255,0,0,0.1); | rgba到css3中才推出,比起rgb多了一个a,a代表透明度 a取值0-1,取值越小,越透明 |
十六进制 | color: #FF0000; | #FF0000 其中FF代表R,00代表G,00代表B |
11.310 文本属性
1、text-align:规定元素中的文本的水平对齐方式
left | 左边对齐 默认值 |
---|---|
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
2、text-decoration:文本装饰
none | 默认,定义标准的文本,通常用来去掉a标签的下划线 |
---|---|
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
inherit | 继承父元素的text-decoration属性的值。 |
3、text-indent:首行缩进
#将段落的第一行缩进 32像素,16px;=1em;
p {text-indent: 32px;}
p {text-indent: 2em;}
4、line-height:行高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
p {
width: 500px;
height: 200px;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div>
<p>hello英雄不问出处,流氓不论岁数</p>
</div>
</body>
</html>
11.311 背景属性
注意:没有宽高的标签,即便设置背景也无法显示,即要求标签是块级标签或行内块级标签
background-color | 设置标签的背景颜色的 |
rgb(0,255,0); rgba(0,255,0,0.1); #00ffff; |
---|---|---|
background-image | 设置标签的背景图片 | background-image: url("images/2.jpg");注意:如果图片的大小小于标签的大小,那么会自动在水平和垂直方向平铺和填充 |
background-size | 设置标签的背景图片的宽、高 | background-size: 300px 300px; background-size: 100% 100%; |
inherit | 设置从父元素继承background属性值 | 以上背景属性的值均可以设置为inherit,代表从父元素继承background属性 |
background-repeat:设置标签的背景图片的平铺方式
background-repeat: repeat; #默认值,在垂直和水平方向都重复
background-repeat: no-repeat; #不重复,背景图片将仅显示一次
background-repeat: repeat-x; #背景图片将在水平方向平铺
background-repeat: repeat-y; #背景图片将在垂直方向平铺
应用:可以在服务端将一个大图片截成小图片,然后在客户端基于平铺属性将小图重复这样用户就以为是一张大图,如此,既节省了流量提升了速度,又不影响用户访问例如很多网站的导航条都是用这种手法制作的
background-attachment:设置标签的背景图片在标签中固定或随着页面滚动而滚动
background-attachment: scroll; #默认值,背景图片会随着滚动条的滚动而滚动
background-attachment: fixed; #不会随着滚动条的滚动而滚动`
background-position:
前端的坐标系:图片默认都是在盒子的左上角,background-position属性,就是专门用于控制背景图片的位置
background-position:水平方向的值,垂直方向的值
1、具体的方位名词 水平方向:left,center,right 垂直方向:top,center,bottom
#如果只设置了一个关键词,那么第二个值就是"center"
2、百分比 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。
#如果只设置了一个值,另一个值就是50%。
3、具体的像素 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0 单位是像素 (0px 0px) 或任何其他的 CSS 单位。
#如果只设置了一个值,另一个值就是50%。可以混合使用%和position值。
1、背景属性缩写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
div {
width: 500px;
height: 500px;
/*background-color: red;*/
/*background-image: url("https://images.jpg");*/
/*background-repeat: no-repeat;*/
/*background-position: right bottom;*/
/*background-size: 100px 100px;*/
background: red url("https://images.jpg") no-repeat right bottom/100px 100px;
} #背景属性缩写
</style>
</head>
<body>
<div></div>
</body>
</html>
2、背景图片和插入图片的区别
1、背景图片仅仅只是一个装饰,不会占用位置,插入图片会占用位置 2、背景图片有定位属性,可以很方便地控制图片的位置,而插入图片则不可以 3、插入图片语义比背景图片的语义要强,所以在企业开发中如果你的图片想被搜索引擎收录,那么推荐使用插入图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
.box1 {
width: 200px;
height: 200px;
background-color: red;
background-image: url("https://images.jpg");
background-repeat: no-repeat;
background-position: right bottom;
}
.box2{
width: 300px;
height: 300px;
background-color: green;
}
</style>
</head>
<body>
<div class="box1">
1111111111111
</div>
<div class="box2">
22222222222222
<img src="https://images.jpg" alt="">
</div>
</body>
</html>
11.3111 rgba与opacity
rgba只能给背景设置透明度,不能给标签、标签的子标签设置透明度,opacity可以给整个标签设置透明度,包括标签的子标签以及标签里的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1 {
width: 200px;
height: 200px;
background-color: rgba(0,0,0,0.65);#只能给背景设置透明度 #
#opacity: 0.65; 改变整个标签的透明度
}
</style>
</head>
<body>
<div class="c1">我是我啊啊啊啊</div>
</body>
</html>
如果想给背景图片设置透明度,则必须使用opacity,因为背景图片不能与背景颜色同时使用,如果同时使用,则背景颜色一直被背景图片覆盖,背景颜色不显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1 {
height: 800px;
background-image: url("https://images.jpg");
background-size:300px auto;
opacity: 0.55; #改变整个标签的透明度
}
</style>
</head>
<body>
<div class="c1"></div>
</body>
</html>
python 之 前端开发(CSS三大特性、字体属性、文本属性、背景属性)的更多相关文章
- 前端面试 CSS三大特性
CSS的三大特性 1.层叠性 代码由上向下执行,相同选择器设置到同一元素上,样式冲突的,会执行比较靠近html的样式,样式不冲突的情况下不影响 代码如下 <!DOCTYPE html> & ...
- 前端开发 - CSS - 总结
CSS:层叠样式表(Cascading Style Sheets) 1.css的特征2.css的引入3.选择器4.伪类选择器5.伪元素选择器6.字体样式 文本样式 背景属性7.盒模型 border m ...
- Python web前端 02 CSS
Python web前端 02 CSS 一.选择器 1.CSS的几种样式(CSS用来修饰.美化网页的) #建立模板 复制内容--->SETTING---> Editor -----> ...
- 前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位
前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位 一丶css选择器的优先级 行内 > id选择器 > 类选择器 ...
- 第十一章 前端开发-css
第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- Python web前端 03 CSS属性
Python web前端 03 CSS属性 一.文字.文本属性 1.文字属性 font-family #字体类型浏览器默认的字体是微软雅黑,字体中有多个字体的时候,如果前面的字体没有就使用后面的字体 ...
- CSS三大特性(继承、优先级、层叠)之个人见解
首先声明一下CSS三大特性——继承.优先级和层叠.继承即子类元素继承父类的样式,比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开 ...
随机推荐
- 和小哥哥一起刷洛谷(6) 图论之SPFA算法
关于\(spfa\) spfa伪代码: void spfa(s){ 最短路数组全部设为无限大; 队列 q; 起点s入队; s离s的距离设为零; while(队列非空){ 取出队首;弹出队首; for( ...
- EasyTrader踩坑之旅(三)
快速阅读 用THSTrader 调试同花顺自动下单的过程 . 主要原理是利用python函数pywinauto 自动获取同花顺上相应控件的值,进行模拟自动化的操作,不得不说python函数库的强大 ...
- 2018-2019-2 网络对抗技术 20165322 Exp7 网络欺诈防范
2018-2019-2 网络对抗技术 20165322 Exp7 网络欺诈防范 目录 实验原理 实验内容与步骤 简单应用SET工具建立冒名网站 ettercap DNS spoof 结合应用两种技术, ...
- ubuntu之路——day11.1 如何进行误差分析
举个例子 还是分类猫图片的例子 假设在dev上测试的时候,有100张图片被误分类了.现在要做的就是手动检查所有被误分类的图片,然后看一下这些图片都是因为什么原因被误分类了. 比如有些可能因为被误分类为 ...
- 利用JS-SDK微信分享接口调用(后端.NET)
一直都想研究一下JS-SDK微信分享的接口调用,由于最近工作需要,研究了一下,目前只是实现了部分接口的调用:其他接口调用也是类似的: 在开发之前,需要提前准备一个微信公众号,并且域名JSAPI 配置接 ...
- 利用Word发布文章到cnblogs博客
利用Word发布文章到cnblogs博客 用博客园cnblogs:http://www.cnblogs.com/博客名称/services/metablogapi.aspx,word老是提醒" ...
- Flutter 中的常见的按钮组件 以及自定义按钮组件
Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton. IconButton.OutlineButton.ButtonBar.Float ...
- Vscode 调试 Flutter 项目
1.Vscode 中打开 flutter 项目进行开发 2.运行 Flutter 项目 flutter run r 键:点击后热加载,也就算是重新加载吧. p 键:显示网格,这个可以很好的掌握布局情况 ...
- [转载] Ubuntu上Firefox字体太小--高分屏背锅
版权声明:本文为CSDN博主「mythinker2」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明.原文链接:https://blog.csdn.net/myth ...
- MyBatis原理总结(前期准备)
1.不同框架解决不用问题,框架封装了很多细节,开发者可以使用简单的方式实现功能. 2.三层架构: 1.表现层 2.业务层 3.持久层 都有相应的处理框架. 3.持久层的技术解决方案: JDBC技 ...