CSS：
- 有了CSS，html中大部分表现样式的标签就可以不用了
- html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁
CSS的引入方式：
-
内联式引入：直接赋予标签style属性进行样式编写
-
<h style="color:red">你好</h>
-
- 嵌入式：直接在文档页面通过style标签创建嵌入的样式表
-
<!DOCTYPE html> <html> <head> <title>CSS学习</title> <style type="text/css"> h{ color:darkviolet; } </style> </head> <body> <h>你好</h> </body> </html>
-
- 外部式：在文档中通过link标签，将外部样式文件引入到页面中：
-
<!DOCTYPE html> <html> <head> <title>CSS学习</title> <link rel="stylesheet" type="text/css" href="E:/python学习资料/上课代码编写/代码练习py/main.css"> </head> <body> <h>你好</h> </body> </html> -
/* main.css的内容 */ h{ color: blue; }
-
- 优先级：内联式 > 嵌入式 > 外部式 （就近原则）
CSS语法：
-
CSS语法规则由两部分构成：选择器 & 一条或多条声明
-
selector{ declaration1; declaration2; } selector: 选择器，一般是你需要改变的HTML标签 declaration1: 每条声明，由一个属性和一个值组成
-
selector{ property: value; } 属性（property）是您希望设置的样式属性（style attribute） 每个属性有一个值。属性和值被冒号分开
-
- 当属性中的值为若干单词时，加引号
-
h1{ font-family: "sans serif"; }
-
- 颜色的写法：
-
p{ color: #00FF00; }
-
h1{ color: #0F0 }
-
body{ background: rgb(255,0,0); background: rgb(100%,0%,0%); } 请注意，当使用 RGB 百分比时，即使当值为 0 时也要写百分比符号 当尺寸为 0 像素时，0 之后不需要使用 px 单位，因为 0 就是 0，无论单位是什么
-
CSS选择器：
-
标签选择器
- 影响范围大，常做通用设置，或用在层级选择器中
-
<p>第一段文字</p> <p>再来一段</p>
-
-
<!DOCTYPE html> <html> <head> <title>CSS学习</title> <style> p{ color: brown; /*定义所有p标签字体为红色*/ } </style> </head> <body> <p>第一段文字</p> <p>再来一段</p> </body> </html>
-
- 类选择器
- 通过类名来选择元素，一个类可以用于多个元素；
- 一个元素也可以使用多个类，应用灵活，可复用；
- 是CSS中使用最多的一种选择器
-
<p class="www">第一段文字</p> <p class="www1">再来一段</p> -
<!DOCTYPE html> <html> <head> <title>CSS学习</title> <style> p.www{ color: brown; /*定义www类标签字体为红色*/ } </style> </head> <body> <p class="www">第一段文字</p> <p class="www1">再来一段</p> </body> </html>
- 属性选择器
- 对指定属性的HTML元素进行设置，而不限于class和id属性
- 通过属性
-
<a href="https://www.baidu.com">这是一个连接</a> <p href="test">测试</p> -
[href]{ color: blue; } /*为所有具有href属性的元素设置字体颜色*/
-
-
- 通过属性的值（整个匹配）
-
<a href="https://www.baidu.com">这是一个连接</a> <p href="test">测试</p> -
[href="test"]{ font-size: 20px; } /*为属性为test的元素设置字体大小*/
-
- 属性的值（属性的值中包含所匹配的单词）：~=
-
<p attr="test">测试</p> √ <p attr="test-xx">测试</p> x <p attr="test_xx">测试</p> x <p attr="test xx">测试</p> √ -
[attr~=test]{ font-size: 20px; } /*为属性包含test的元素设置字体大小*/
-
注意：不包含下划线和连字符的
-
- 通过属性的值（整个匹配）
-
- 属性的值（从开头整个匹配或带有连字符的属性值）：|=
-
<p attr="test">测试</p> √ <p attr="test-xx">测试</p> √ <p attr="test_xx">测试</p> x <p attr="test xx">测试</p> x -
[attr|=test]{ font-size: 20px; } /*为单词为test或开头为test-的元素设置字体大小*/
-
- 属性的值（从开头整个匹配或带有连字符的属性值）：|=
-
-
- 注意：适用于由连字符分隔的属性值
- 属性的值（从属性值的开头进行匹配）：^=
-
<p attr="test">测试</p> √ <p attr="test-xx">测试</p> √ <p attr="test_xx">测试</p> √ <p attr="test xx">测试</p> √ -
[attr^=test]{ font-size: 20px; } /*为开头包含test的所有元素设置字体大小*/
-
-
-
- 属性的值（从属性值的结尾开始匹配）：$=
-
<p attr="test">测试</p> √ <p attr="xx-test">测试</p> √ <p attr="xx_test">测试</p> √ <p attr="xx test">测试</p> √ -
[attr$=test]{ font-size: 20px; } /*为结尾是test的所有元素设置字体大小*/
-
- 属性的值（从属性值的结尾开始匹配）：$=
-
- 属性的值（只要含有则匹配）：*=
-
<p attr="test">测试</p> √ <p attr="xx-test">测试</p> √ <p attr="xx_test">测试</p> √ <p attr="xx test">测试</p> √ -
[attr*=test]{ font-size: 20px; } /*为含有test的所有元素设置字体大小*/
-
- 属性的值（只要含有则匹配）：*=
扫描二维码关注公众号，回复：
5543771 查看本文章
-
- 几种属性选择的匹配方式：
- ~=：用于选取属性值中包含指定词汇的元素；
- 必须是单独的词汇，不能是带有连字符或下划线组成的单词。
- |=：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词；
- 可以有连字符组成，word或者是word-wild
- ^=：匹配属性值以指定值开头的每个元素
- $=：匹配属性值以指定值结尾的每个元素
- *=：匹配属性值中包含指定值的每个元素
- ~=：用于选取属性值中包含指定词汇的元素；
- 几种属性选择的匹配方式：
- 层级选择器
- 主要应用在标签嵌套的结构中，通过层级，限制样式的作用范围
-
<div class="header"> <p class="title">标题1</p> <span class="author">作者1</span> <p class="content"> 主要内容 </p> </div> <div class="footer"> <p class="title">标题2</p> <span class="author">作者2</span> <p class="content"> 主要内容2 </p> </div> -
.header .title{ color: gold; font-size: 30px; } /*生效所有header类下的title类*/ .header .author{ color: blue; font-size: 15; } /*生效所有header类下的author类*/ .header p{ font-weight: bold; } /*生效所有header类中的p标签*/
- ID选择器
- 通过ID名进行元素选择，元素的ID名定义时在整个文档属于唯一
- 通过ID选择器只能对应页面元素中的一个
- ID名通常作为JS脚本定位使用，不推荐ID选择器
-
<div class="header"> <p id="title">标题1</p> <span id="author">作者1</span> <p id="content"> 主要内容 </p> </div> -
#title{ font-size: 25px; font-weight: bold; } #author{ font-size: 10px; } #content{ color: blue; }
- 伪类选择器
- CSS伪类选择器用于向某些选择器添加特殊的效果
- 伪类的语法
-
selector:pseudo-class{ property: value; }
-
-
- 与css类搭配使用
-
selector.class:pseudo-class{ property: value; }
-
- 与css类搭配使用
- 锚伪类
- 控制连接访问状态，常见状态有：活动状态、已访问状态、未被访问状态、鼠标悬停状态
-
<a class="baidu" href="https://www.baidu.com">访问这里</a> -
.baidu:link{ color: blue; } /*未访问过的连接*/ .baidu:visited{ color: black; } /*访问过的连接*/ .baidu:hover{ color: gold; } /*鼠标划过的连接*/ .baidu:active{ color: red; } /*已选中的连接*/
-
- link、visited、hover、active
-
注意：hover必须定义在link和visited之后，才是有效的；active必须定义在hover之后，才是有效的
-
- link、visited、hover、active
CSS选择器的权重
- 当有多个同类样式作用于同一个元素时：
- 1. 权重高的样式对元素起作用
- 2. 权重相同时后写的样式覆盖前面写的
- 使用!important将样式权重设置为10000，将!important写到样式属性值后
-
<p id="test" style="color: blue;">测试</p> -
#test{ color: red !important; }
-
- 权重值：就近原则
- 内联式样式：1000
-
<p style="color: red;"></p>
-
- 内联式样式：1000
-
- D选择器：100
-
#id {color: red;}
-
- D选择器：100
-
- 类选择器：10
-
.class { background: blue;}
-
- 类选择器：10
-
- 标签选择器：1
-
p{font-weight:bold;}
-
- 标签选择器：1
CSS基本属性
- 布局属性
- width：设置元素（标签）的宽
- height：设置元素（标签）的高
-
#button{width:100px; height:100px;}
-
-
- background：设置背景色或背景图
-
body{ width: 100%; height: 100%; background: #00FF00 url("../img/1.jpg") no-repeat ; }
-
background属性可以分解为如下几个设置项
- font-size: 10px;">- background-image: 设置背景图片地址
url(路径)
- background-repeat: 设置图片如何重复平铺
repeat、repeat-x(水平方向重复)、repeat-y(垂直方向重复)、no-repeat(图片只显示一次)
- background-position: 设置图片的位置
left、right、center
- background-attachment: 设置图片是固定的还是会随页面滚动
scroll(背景图片会随着页面其余部分的滚动而移动)、fixed(页面的其余部分滚动时，背景图像不会移
动)、
-
- background：设置背景色或背景图
-
-
-
注意：在背景图片路径填写时，如果使用内联式写法则从当前页面路径开始查找相对路径，如写在外部CSS文件中，则以CSS文件为相对基础.
-
- border：设置元素周围的边框
-
p{ border: 10px double blue; }
-
依次设置：border-width、border-style、border-color
-
也可以拆分成四个边的样式选项
-
- border-top: 顶边框 - border-buttom: 底边框 - border-left: 左边框 - border-right: 右边框 -
[attr]{ border-top: 5px inset blue; border-bottom: 5px inset green; border-left: 5px outset red; border-right: 5px outset red; }
-
-
-
-
- 设置时提供的边框样式属性：
-
- dotted: 点状 - solid: 实线 - double: 双线 - dashed: 虚线 - groove: 3D 凹槽边框 - ridge: 定义 3D 垄状边框 - inset: 定义 3D inset 边框 - outset: 定义 3D outset 边框 - inherit: 规定应该从父元素继承边框样式
-
- 设置时提供的边框样式属性：
-
-
<p class="p1">aaaaaaa</p> <p class="p2">bbbbbbb</p> <p class="p3">ccccccc</p> <p class="p4">ddddddd</p> <p class="p5">ggggggg</p> <p class="p6">eeeeeee</p> <p class="p7">fffffff</p> <table class="table1" border="1"> <tr> <th>姓名</th> <th>性别</th> <th>年纪</th> </tr> <tr> <td>张三</td> <td>女</td> <td>18</td> </tr> <tr> <td>李四</td> <td>男</td> <td>20</td> </tr> </table> -
.p1{ border: 1px dotted blue; } .p2{ border: 1px solid blue; } .p3{ border: 1px double blue; } .p4{ border: 1px dashed blue; } .p5{ border: 10px groove green; } .p6{ border: 10px ridge blue; } .p7{ border: 10px inset blue; } .table1{ border: 5px double red; }
-
padding：设置元素包含的内容和元素边框的距离，也叫内边距
-
p{ padding: 100px; border: 1px solid black; }
-
这个样式属性也可以拆分成以下单独四种，可以分别设置对应位置的内边距
-
- padding-top: 设置上内边距 - padding-bottom: 设置下内边距 - padding-left: 设置左内边距 - padding-right: 设置右内边距
-
-
-
-
- margin：设置元素和外界的边距，也叫外边距
-
p{ margin: 10px; } /*同时设置四个边距为10px*/
-
与padding类似，margin属性也可以拆分为四个方向的单独设置
-
- margin-top: 设置上外边距 - margin-bottom: 设置下外边距 - margin-left: 设置左外边距 - margin-right: 设置右外边距
-
-
- margin：设置元素和外界的边距，也叫外边距
-
- float：定义元素在当前父元素下向哪个方向浮动，这个属性常用于图像，使文本围绕在图像周围
- 如果浮动方向空间不足，元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止
-
<input type="submit" value="提交"> -
input{ float: left; }
- float：定义元素在当前父元素下向哪个方向浮动，这个属性常用于图像，使文本围绕在图像周围
- 文本常用属性
- color：设置元素中的文字颜色
-
p{color: red;}
-
- color：设置元素中的文字颜色
-
- font-size：设置元素中的文字大小
-
p{font-size: 12px;}
-
- font-size：设置元素中的文字大小
-
- font-family：设置元素中的文字字体
-
p{font-family:"微软雅黑"} /*为了避免中文兼容问题，常用字体的英文标识*/ p{font-family:"Microsoft Yahei"}
-
- font-family：设置元素中的文字字体
-
- font-widght：设置元素中的文字是否加粗
-
p{font-widght:bold;} /*设置加粗*/ p{font-widght:normal;} /*设置不加粗*/
-
- font-widght：设置元素中的文字是否加粗
-
- line-height：设置元素中的文字行高
-
p{line-height:24px;}
-
- line-height：设置元素中的文字行高
-
- text-decoration：设置元素中文字的下划线
-
p{text-decoration:underline;}
-
- none: 默认文本格式，无下划线 - underline: 定义文本下的一条线 - overline: 定义文本上的一条线 - line-through: 定义穿过文本的一条线 - blink: 定义闪烁的文本 - inherit: 规定应该从父元素继承 text-decoration 属性的值
-
- text-decoration：设置元素中文字的下划线
-
- text-align：设置元素中文字对齐方式
-
p{text-align:center;}
-
- text-indent：设置元素中文字的首行缩进
-
p{text-indent:24px;}
-
- text-align：设置元素中文字对齐方式
-
- display：设置元素的类型及隐藏方式
-
p{display:none;}
-
- none: 元素不会显示 - block: 元素将显示为块级元素，此元素前后会带有换行符 - inline: 此元素被显示为内联元素，元素前后没有换行符 - list-item: 元素作为列表显示 - table: 元素作为块级表格来显示（类似 <table>），表格前后带有换行符 - inline-table: 元素作为内联表格来显示（类似 <table>），表格前后没有换行符 - table-cell: 此元素会作为一个表格单元格显示（类似 <td> 和 <th>） - table-caption: 此元素会作为一个表格标题显示（类似 <caption>）
-
- display：设置元素的类型及隐藏方式
- 元素溢出
- overflow：当子元素的大小超过所承载的父元素大小时，需要设置父元素对于溢出的子元素显示方式
-
<p>123456789</p> p{ width:500px; text-indent: 498px; border: 1px solid blue; overflow:auto; }
-
- visible: 默认值;内容不会被修剪，会呈现在元素框之外 - hidden: 内容会被修剪，并且其余内容是不可见的 - scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 - auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容
-
- overflow：当子元素的大小超过所承载的父元素大小时，需要设置父元素对于溢出的子元素显示方式
定位
-
文档流：文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。
-
CSS3主要有三种定位：普通流、浮动、绝对定位
-
static：元素框正常生成，块级元素生成一个矩形框、作为文档流的一部分、行内元素则会创建一个或多个行框，置于其父元素中
-
relative：相对定位元素，元素还会保持定位前的形状，并且移动前的位置也会保留下来，不会脱离文档流
-
一般是将父级设置相对定位（relative），子级设置绝对定位（absolute），子级就以父级作为参照来定位，否则子级相对于body来定位
-
相对定位会按照元素的原始位置对该元素进行移动
-
-
absolute：绝对定位元素，元素脱离文档流，移动前的位置在文档流中关闭，定位后生成一个新的块级框，不论他之前在原始文档流中生成何种类型的框
- 也可以理解为漂流在文档流的上方，相对于上一个设置了定位的父级元素来进行定位，如果找不到，则相对于body元素进行定位
- 通过绝对定位，元素可以放置到页面上的任何位置
- fixed：固定定位元素，元素脱离文档流，不占据文档流的位置，相对于浏览器窗口进行定位
- 元素偏移的设置：
-
- top: 定位元素的上外边距边界与其包含块上边界之间的偏移 - bottom: 定位元素下外边距边界与其包含块下边界之间的偏移 - right: 定位元素右外边距边界与其包含块下边界之间的偏移 - left: 定位元素左外边距边界与其包含块下边界之间的偏移 - z-index: 设置堆叠元素的层级，这里的层级不是从上到下，而是从里到外
-
- 下面是做了一个登陆的界面