Python全栈 Web(CSS样式表、选择器)-阿里云开发者社区

开发者社区> 开发与运维> 正文

Python全栈 Web(CSS样式表、选择器)

简介:










CSS层叠样式表:
(Cascading Style Sheet)
作用:
装饰和美化页面元素,实现网页的排版布局
                  CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。
                  CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素
                  CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力
使用:
1.行内样式/内联样式:
特点:
在具体的标签中使用参style属性,引入CSS的样式的代码
语法:
<标签 style=“CSS” 样式声明>
1)样式声明/CSS语句:
对当前元素添加样式
语法:
CSS属性:值;
2)
CSS的样式声明可以是多条
<标签 style=“属性:值; 属性:值;”>
常见的CSS属性:
1》.设置字体大小
属性:
funt-size
取值:
以像素为单位的数值 默认16px
2》.设置字体颜色
属性:
color
取值:
颜色的英文单词
3》.设置背景颜色:
属性:
background-color
取值:
颜色的英文单词
2.文档内嵌/内部样式表:
特点:
将CSS代码与具体的标签相分离,在HTML文档中使用<style></style>标签引入CSS代码
语法:
<style>
选择器1
选择器2
选择器3
...
</syle>
选择器:
使用文档内嵌方式引入CSS样式表时,实现了结构与样式分离
凡是需要自己定义选着器来匹配文档中元素 与其他应用样式
作用:
匹配文档原数为其应用样式
语法:
选择器实际上由两部分组成
选择器(符){
属性:值;
属性:值;
}
标签选择器/元素选择器:
使用标签名作为选择符,匹配文档中所有的标签,并应用样式
注意:
<style></style>
可以写在任意位置 但是基于样式的优先原则,一般写在head里
3.外链方式/外部样式表:
定义外部的.css文件,在HTML中引入即可 真正实现文档与样式表的分离
语法:
在外部样式表中使用选着器来定义样式:
在HTML中用<link>引入CSS文件

样式表的特征:
继承性:
大部分的CSS属性都是可以被继承的
子元素或后代元素都是可继承父元素中的样式的
所有的文本属性都可以被继承
块元素的宽度与父元素保持一致
层叠性:
允许为元素定义多个样式,共同起作用

样式表的优先级:
低~高
1.浏览器的缺省设置:浏览器默认样式
2.文档内嵌/外链方式:在不发生样式冲突时:共同起作用,不冲突时:后来者居上
3.行内样式的优先级最高

CSS的选着器:
作用:
规范页面中哪些元素能够应用声明好的样式
目的:
匹配页面原素
详解:
1.标签选择器/元素选择器:
特点:
将标签名作为选择符,来匹配文档中所有的该标签,包含后代元素
语法:
p{
color: red;
text-decoration: none;
}

2.类选择器:
特点:
通过元素的class属性值进行匹配
语法:
.c1{
样式
}
<p class="c1">文本</p>

类选择器的结合使用:
1.
标签名.类名
表示在指定的标签中匹配的class属性值对应的元素
标签名一定要写在前面
语法:
p.c1{
样式
}
2.
.类名1.类名2(不常用)

3.
标签中使用两个选择器的样式
语法:
<p class="类名1 类名2">
3. ID 选择器:
作用:
HTML中所有的元素都有一个ID属性,主要用来表示元素在文档中的标志具有唯一性
通过元素的ID属性值进行匹配
*通常网页中外围的结构化标签。都使用ID进行标识  具有唯一性
语法:
#nav{
样式
}
<div id="nav">导航条</div>
4.群组选择器:
作用:
为多个选择器设置共同的样式
语法:
div,h1,...{
样式
}
<div></div>
<h1></h1>
...
5.后代选择器:
作用:
依托于元素的后代关系匹配元素
既包含直接子元素和后代子元素
语法:
选择器1 选择器2..{
样式
}
在选择器1对应的元素匹配后代元素,后代元素必须满足选择器2
6.子代选择器:
作用:
依托元素的子代关系进行匹配 只匹配直接子元素
语法:
选择器1>选择器2{
样式
}
在选择器1对应的元素中匹配直接子元素
7.伪类选择器:
1)超链接伪类选择器
2)动态伪类选择器
主要针对元素的不同状态去设置样式
超链接的不同状态
访问前:link
访问后:visited
激活(鼠标按住不放):active
鼠标滑过:hover
其他元素:
鼠标滑过
激活
表单控件:
获取焦点时的状态:focus
对密码框和文本框而言 当用户输入时都视为获取焦点
3)与其他选择器结合使用
设置元素在不同状态下的样式
语法:
a:link{
color:black;
}
如果要给超链接添加伪类选择器 必须按照以下顺序书写
link
visited
hover
active
选择器的优先级
当多个选择器的样式同时应用到一个元素上时 要按照不同选择器的优先级来应用样式

判断选择器的优先级 主要看选择器的权重(权值)

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

如果是复杂选择器(后代,子代)
最终权值是是各选择器之和

尺寸单位与颜色取值
尺寸单位
px   像素单位  默认单位
%    参照父元素对应属性的值进行获取
in   inch 英寸 1in = 2.54cm
pt   榜 1pt = 1/72 in
cm
mm
颜色单位
1.英文单词
2.rgb(r,g,b) 表示颜色
取值:
每一种三原色的取值范围:0~255
3.rgba(r,g,b,alpha)
设置颜色 还可以调整透明度
三原色的取值范围:0~255
alpha透明度取值:1/0
0:表示透明
1:表示不透明
取小数表示半透明。整数的0可以省略不写 0.5/.5
4.十六进制表示颜色:
三原色的取值为0~255
取值转换为十六进制
表示颜色:
长十六进制  6位表示方法
每两位为一组 代表一种三原色
#ff0000表示红色
短十六进制 3位表示
浏览器会自动对每一位进行重复补全,最终补全为十六进制


元素分类
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只在行内块元素中使用
行内元素是可以共行显示的,但是如果代码中出现了换行,页面最终效果上,行内元素之间会有空隙

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章