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