Python全栈之学习CSS(1) Python全栈之学习CSS(1)

1. 表单框类型

文件上传：

2. 表单属性

3. css引入

my.css

4. 选择器

4.1 常用选择器
4.2 选择器的优先级
4.3 关系选择器
4.4 属性选择器
4.5 伪类选择器_颜色设置
4.6 伪对象选择器

5. 字体属性设置

cursor属性：

6. 文本属性

7. 盒子模型

order-style:

8. 学习工具

总结

1. 表单框类型

单选框 , 复选框 , 下拉框
男性女性香蕉黄瓜茄子冬瓜

文件上传：

文件上传
头像:请填写相关数据

2. 表单属性

input属性
用户名:
密码:
年龄:
邮箱:
班级:
国籍:

3. css引入

css学习 css的三种引入方法p{color:blue; }今天学习css
今天学习css
我们很开心
我是链接

my.css

a{font-size:100px; }

4. 选择器
4.1 常用选择器

常用选择器/* 标签选择器*/h1{color:cyan}/* 类选择器 */.one{color:green; }/* ID选择器 */#two{color:red; }/* 组合选择器 */h1,h2,h3,h4{color:goldenrod; }/* 越具体指定,优先级就越高 */h1.one{color:gray; }h2#two{color:greenyellow; }1号标签1111号标签2222号标签333我是连接我是span我是h3标签
aoe

4.2 选择器的优先级

选择器的优先级font{color:greenyellow; }.one{color:blue; }#two{color: indigo; }font{color:greenyellow!important; } 选择器的优先级

4.3 关系选择器

关系选择器 /*多行注释*/ul li/* 包含选择器/后代选择器 */{color:darkslateblue; }ul>li/* 父子选择器 */{color:yellow; }ol+li/* 相邻选择器特指下面一个*/{color:green; }ol~li/* 兄弟选择器特指下面一堆*/{color:deeppink; }
动漫频道
学习频道
直播频道
游戏频道
少儿频道
智慧树,大风车
老年人频道
授课直播
亚洲捆绑

4.4 属性选择器

属性选择器input[name]{background-color: dodgerblue; }input[name=username]{background-color: red; }input[type=password]{background-color:yellow; }input[type=text]{background-color:green; }
用户名:
密码:
性别: 男女

4.5 伪类选择器_颜色设置

伪类选择器/* 鼠标悬停的时候触发 */a:hover{color:teal; }/* 列表中第一个元素 */ul li:first-child{color:yellow; }/* 列表中最后一个元素 */ul li:last-child{color:green; }/* 列表中具体某一个元素 */ul li:nth-child(4){color: red; }/*偶数个2n / even奇数个2n-1 / odd n不可换 */ul li:nth-child(even){color:turquoise; }ul li:nth-child(odd){color:violet; }/* 小练习 *//* 1.写一个table表格,设置一个背景色 */table{background-color:green; }/* 2.偶数行颜色为蓝色 */table tr:nth-child(2n){background-color: blue; }table tr td{}/* 3.第3 , 6 , 93倍行颜色为黄色 */table tr:nth-child(3n){background-color:yellow; }/* 4.鼠标滑过时,颜色变成红色 */table tr:hover{background-color: red; }老男孩教育
马春妮
孙坚
晓东
文东
王伟
好心
蜂拥
倩倩
石超
帅帅
15 1111ff -> 2551111 1111纯红色: # ff 00 00=> #f00 (简写)纯绿色: # 00 ff 00=> #0f0 (简写)纯蓝色: # 00 00 ff=> #00f (简写)-->333111
111 222 444
222 333 444
111 222 333 444
111 222 333 444
111 222 333 444
111 222 333 444
111 222 333 444
111 222 333 444
111 222 333 444
111 222 333 444

4.6 伪对象选择器

< !DOCTYPE html> < html lang="en"> < head> < meta charset="UTF-8"> < meta name="viewport" content="width=device-width, initial-scale=1.0"> < title> 伪对象选择器< /title> < style> .name{color:goldenrod; }/* 在内容之前插入 */.name::before{content:"我问:"; color:green; }/* 在内容之后插入 */.name::after{content:"肯定对!"; color:magenta; }/* 鼠标选中后的样式 */.name::selection{background-color: mediumspringgreen; color: white; }< /style> < /head> < body> < span class="name"> 王文很帅,对不对?< /span> < /body> < /html>

5. 字体属性设置

css的相关属性: 字体属性 /*@符制定规则,来设置引入的自定义字体 */@font-face{font-family:"王文"; src:url("font/方正舒体.TTF"); }/* 设置字体属性 */.c1{font-style:italic; /*字体斜体*/font-weight:bold; /*字体粗细*/font-size:32px; /*字体大小*/font-family:"宋体"; /*字体种类*/}/* 简写字体1 */.c2{font:italic bold 32px "宋体"; }/* 简写字体2 */.c3{border:solid 1px red; font:64px/2 "宋体"; /*字体大小/行高比例字体种类*/background-color: yellow; }/* 自定义字体 */.c4{font:64px/2 "王文"; }ul{/* 去掉前面的点. */list-style:none; /* 改变鼠标的形态 */cursor:wait; }
设置字体相关的属性1
设置字体相关的属性2
设置字体相关的属性3
设置字体相关的属性4

cursor属性：

文章图片

6. 文本属性

css的相关属性: 文本属性 .p0{font-size:16px; width:200px; height:200px; background-color: red; /* 字符间距 */letter-spacing:5px; /* 文本的首行缩进 *//* text-indent:32px; */ /* px代表像素*/text-indent:2em; /* 1em = 1个元素的大小按照字体比例缩进 */}.p1/* 强制换行纯英文不会默认换行*/{word-wrap: break-word; }.p2/* 强制不换行中文默认换行*/{white-space:nowrap; }.p3/* 设置height与line-height数值相同,可以让文字在垂直方向上居中 */{font-size:16px; width: 200px; height:50px; line-height: 50px; background-color:goldenrod; }.p4/* text-align:left/center/right文本水平对齐方式 */{font-size:16px; width: 200px; height:50px; line-height: 50px; background-color:goldenrod; text-align:center; }.p5/* text-decoration:overline/line-through/underline/none; */{text-decoration:none; }.p6 img/* vertical-align:top/middle/bottom文本垂直对齐方式[一般都是在图片排版的时候使用] */{vertical-align:-600%; }/* text-shadow相关设置none：无阴影 ①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值 ②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 ③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值：设置对象的阴影的颜色。*/.p7{text-shadow:7px 4px 10px gray; }setwordxiangguanpropertyhahahah
设置文本属性111222233asd设置文本属性设置文本属性
本属性
本属性
本属性~~特价取消~~
文章图片
点我跳转
我是炫酷的阴影效果

7. 盒子模型

盒子模型 #d1{width: 200px; height:200px; /* 上右下左top right bottom left*/border:solid 10px green; border-top:dotted 3px red; border-right:dashed 5px blue; }#d2{width: 200px; height:200px; border:solid 5px red; /* border-radius: 100px; */border-top-left-radius: 100px; border-bottom-right-radius: 100px; }#d3{width: 200px; height:200px; border:solid 5px red; /*上右下左 padding会增大盒子的面积内填充*//* padding:50px; *//* 上下左右*//* padding:10px 20px; *//* 上左右下 */padding:10px 20px 30px; /* 上右下左 *//* padding:10px 20px 30px 10px; *//* padding-left:30px; */}#d4{width: 200px; height:200px; border:solid 5px red; /*上右下左盒子与盒子之间的间距外边距*//* margin:60px; *//* 上下左右 */margin:10px 20px; /* 上左右下 */margin:10px 20px 30px; /* 上右下左 *//* margin:10px 20px 30px 10px; *//* margin-left:30px; */}#d5{width: 200px; height:200px; border:solid 5px red; /*上下0px 左右自动居中*/margin:0px auto; }/* box-shadow:①：第1个长度值用来设置对象的阴影水平偏移值。可以为负值 ②：第2个长度值用来设置对象的阴影垂直偏移值。可以为负值 ③：如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值 ④：如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值：设置对象的阴影的颜色。*/#d6{width:100px; height:100px; border:solid 5px red; box-shadow:6px 3px 16px 6px black; }我是d3我是d4我是d5

order-style:

文章图片

8. 学习工具

学习css一般有三种工具提供给我们开发:1. 代码编辑器本身一般自带提示或者语法提示.2. css手册,内部提供提供了所有的样式属性和样式值的使用参考,甚至包括一些演示代码.http://css.doyoe.com3. 浏览器也内置了一些css辅助工具给我们学习和开发.F12,或者Ctrl+shift+i,或者鼠标右键,检查代码

总结 【Python全栈之学习CSS(1)】本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!