CSS_python
2024-05-12 17:14:24
目录
- CSS
- CSS选择器
- 基本选择器
- 组合选择器
- 属性选择器
- 分组和嵌套
- 伪类选择器
- 伪元素选择器
- 选择器的优先级
- CSS属性相关
- 长宽属性
- 字体属性
- 文字属性
- 背景图片
- 边框
- display属性
- 盒子模型
- 浮动
- 解决浮动带来的影响
- 溢出属性
- 定位
- 浮动和定位是否脱离文档流（原来的位置是否还保留）
- z-index模态框
- 透明度opacity
CSS
层贴样式表:就是给HTML标签添加样式的，让它变的更加的好看
#注释
/*单行注释*/
/*
多行注释1
多行注释2
多行注释3
*/通常我们在写css样式的时候也会用注释来划定样式区域(因为HTML代码多所以对Y应的css代码也会很多)
/*这是博客园首页的css样式文件*/
/*顶部导航条样式*/
. . .
/*左侧菜单栏样式*/
. . .
/*右侧菜单栏样式*/
. . . # css的语法结构
选择器 {属性1:值1;属性2:值2;属性3:值3;属性4:值4;
}# css的三种引入方式1. style标签内部直接书写<sty1e>h1 {color: burlywood;}</sty1e>2. link标签引入外部css文件(最正规的方式解耦合)<link rel=" stylesheet" href= ”mycss .css">3.行内式(一般不用)<h1 style="color: green">老板好 要上课吗?</h1>CSS选择器
基本选择器
# id选择器# 类选择器# 元素 / 标签选择器# 通用选择器
<sty1e>/* id选择器*/#d1 { 找到id是d1的标签将文本颜色变成绿黄色color: greenyellow;}/*类选择器*/.c1 { 找到class值里面包含c1的标签color: red;}/*元素(标签)选择器*/span { 找到所有的span标签color: red;}/+通用选择器*/* { 将htm1页 面上所有的标签全部找到color: green; }
</sty1e>组合选择器
"""
在前端我们将标签的嵌套用亲戚关系来表述层级<div>div<p>div p</p><p>div P<span>div P span</ span></p><span> span</ span><span> span</span></div>div里面的p span都是div的后代p是div的儿子p里面的span是p的儿子是div的孙子div是p的父亲. . .
"""
#后代选择器
#儿子选择器
#毗邻选择器
#弟弟选择器
<sty1e>/*后代选择器*/div span {color: red;}/*儿子选择器*/ div>span { color: red;}/*毗邻选择器*/div+span { 同级别紧挨着的下面的第一 -个color: aqua;}/*弟弟选择器*/div-span { 同级别下面所有的spancolor: red;}
</sty1e><styLe> [username] { /*将所有含 有属性名是username的标签背景色改为红色*/background-color: red;}
</styLe>属性选择器
"""
1 含有某个属性发送至所有人.
2 含有某个属性并且有某个值
3 含有某个属性并且有某个值的某个标签
"""#属性选择器是以[ ]作为标志的[username] { 将所有含有属性名是username的标签背景色改为红色background-color: red;*/
}[username='jason'] { 找到所有 属性名是username并且属性值是jason的标签background-color: orange;
}input [username= 'jason' ] { 找到所有属性名是username并且属性值是jason的input标签background-color: wheat;*/
}分组和嵌套
<styLe> div, p, span { /*逗号表示并列关系*/coLor: yellow ;}
</styLe><styLe>#d1, .c1, span {coLor: orange ; }
</styLe><styLe>#d1 .c2 #d3 {coLor: red;} #d1 .c2 span {coLor: red;}
</styLe>
伪类选择器
<styLe>a:link { /*访问之 前的状态*/coLor: red;}a:hover { /*需要记住*/coLor: aqua; /*鼠标悬浮态*/}|a:active {coLor: black; /*鼠标点击不松开的状态 激活态*/}a:visited {color: darkgray; /*访问之 后的状态*/}p{color: darkgray ;font-size: 48px;}p:hover {color: white ;}input: focus { /* input框获取焦点(鼠标点了input框)*/background-color: red;}</styLe>伪元素选择器
p:first-letter { # 开头第一个只大写突出font-size: 48px;color: orange ;
}p:before { /*在文本开头 同css添加内容*/content: ' 你说的对' ;color: blue;
}p:after {content: ' 雨露均沾' ;color: orange;
}
ps :before和after通常都是用来清除浮动带来的影响:父标签塌陷的问题(后面有)选择器的优先级
"""
id选择器
类选择器
标签选择器
行内式"""< !DOCTYPE html>
<html lang=" en">
<head><meta charset="UTF-8"><title>Title</title><meta name = "viewport" content= "width=device-width, initial-scale=1"><style>1.选择器相同书写顺序不同 就近原则:谁离标签更近就听谁的2.选择器不同行内> id选择器> 类选择器>标签选择器精确度越高越有效#d1 {color: aqua;}.c1 {color: orange;*/}p {color: red;*/}</style><link rel="stylesheet" href= "mycss1.css">
</head>
<body><p id="d1" class="c1" sty1e= "color: blue">贤妻果然很识趣，有前途-</p>
</body>
</html>CSS属性相关
长宽属性
<style>P{background-color: red;height: 200px;width: 400px;}span {background-color: green;height: 200px;width: 400px;/*行内标签无法设置长宽就算你写了也不会生效*/}</style>字体属性
P{font- family: "Arial Black" ，"微软雅黑","..."; 第一个不生效就用后面的写多个备用 font-size: 24px; 字体大小font- weight: inherit; # bolder 加粗 # lighter 变细 # 数值 px 范围100-900# inherit继承父元素的粗细值color: red; 直接写颜色英文color: #ee762e; 颜色编号color: rgb(128,23,45); 三基色 数字范围0-255color: rgba(23， 128， 91，0.9); 第四个参 数是颜色的透明度范围是0-1}P当你想要一一些颜色的时候 可以利用现成的工具
1 pycharm提供的取色器
2 qq或者微信截图功能文字属性
<styLe>p{text-align: center; 居中text-align: right; 右对齐text-align: Left; text-align; justify; 两端对齐text-decoration: underLine; 下划线text decoration: overLine; 上划线text-decoration: Line -through; 删除线text- decoration: none ; 无样式# 在htmL中有很多标签渲染出来的样式效果是一样的font- size: 16px; 字体大小text- indent: 32px ; 首航缩进32px}a{text-decoration: none ;# a 标签自带下划线， 这个无样式可以去除 a 标签自带的下划线}
</style>
</head>
<body><p>我要感谢我的导师，要不是他，我论文早写完了(狗头) </p>--><a href="https ://www . mzitu Jcom/">点我</a>
</body>
</htol>
背景图片
<style>div {height: 800px; width: 800px ;background-coLor: red; 背景图片background-image: urL("222. png"); 默认要全 部铺满background-repeat: repeat; 默认要铺满 background-repeat: no -repeat; 不铺background-repeat:repeat-x; 延x轴朴background-repeat repeat-y; # 其实浏览器不是一个平面 是一个三维立体结构z轴指向用户越大厦用户越近background-position:center center;（居中） 第一个左 第二 个上}
</style>
"""
如果出现了多个属性名前缀是一样的情况一般情况下都可以简写只写前缀
background: red urL("222,png") no-repeat center center;
"""
只需要填上你想要加的参数即可位置没有关系参数个数也不做限制加就显示不加就用默认的设置
<style>#d1 {height: 500px;background- coLor: red;}#d2 {height: 500px ;background-coLor: green;}#d3 {height: 500px ;background- inage: urL("222 ，png");background- attachnent: fixed; 固定图片}#d4 {height: 500px ;background- color: aqua ;}
</styLe>边框
<styLe>p{background-coLor: red;border-uridth: 5px ; # border 边框 有上下左右border- style: solid;border- coLor: green;}div {border-Left-width: 5px ; # 左边框的宽，颜色，样式border-Left-coLor: red; border-Left styLe: dotted;border- right -width: 18px;border- right-coLor: greenyellow; border- right-style: soLid;forder-top-width: 15px;border-top-coLor: deeppink;border-top-style: dashed;border- bottom-width: 18px;border- bottom- coLor: tomata; border- bottom- styLe: solid ;# border: 3px solid red; /*三者位置可 以随}#d1 {background-coLor: greenyeLlow;height: 400px;width: 400px;border-radius: 50%; # 直接写50%即可长宽一 样就是圆不一样就是椭圆}
}
</style>display属性
<styLe>#d1 {display: none;隐藏标签不展示到前端页面并且原来的位置也不再占有了但是还存在于文档上dispLay: inline ;将标签设置为行内标签的特点}#d2 {dispLay: inLine ;}
</styLe><body><div id="d1" styLe="height: 108px; width: 168px; background-color: red">01</div><div id="d2"styLe="height: 108px;width: 106px; background-coLor: greenyelLow">02</div></body>
#d1 {display: bLock; /*将标签设置成块儿级标签的特点*/
}#d2 {display: bLock;
}<body><span id="d1" styLe= "height: 100px; width: 1@@px ; background-color: red" >span</ span><span id="d2" styLe= "height: 100px; width: 106px ; background-coLor: greenyelLow" >span</span></body>
#d1 {dispLay: inline-block;
}
#d2 {dispLay: inLine- block; /*标签即可以在 行显示又可以设置长宽*/
}<div id="d1" styLe="height: 108px; width: 168px; background-color: red">01</div><div id="d2"styLe="height: 108px;width: 106px; background-coLor: greenyelLow">02</div> <div styLe="display; none ">div1</div><div>div2</div><div styLe="visibility: hidden"> 单纯的隱藏位置还在</div> <div>div4</div>盒子模型
盒子模型: # 就以快递盒为例快递盒与快递盒之间的距离(标签与标签之间的距离margin外边距>>盒子的厚度(标签的边框border )盒子里面的物体到盒子的距离(内容到边框的距离padding内边距)物体的大小(内容content)如果你想要调整标签与标签之间的距离你就可以调整margin
# 浏览器会自带8px的margin,一般情况下我们在写页面的时候，上来就会先将body的margin去除
#-----------------------------------------------------------------------------------------------
1外边距(标签与标签之间的距离) margin
2边框 border
3内边距/内填充 padding
4内容 con tent
#-----------------------------------------------------------------------------------------------<styLe>body {margin: 0; 上下左右全是0margin: 10px 20px; 第一个上下第二个左右margin: 10px 20px 30px; 第一个上 第二个左右 第三个下 margin: 10px 20px 30px 40px; 上右下左}p{margin-left: 0; margin-top: 0;margin-right: 0;margin-battom: 0;}
#----------------------------------------------------------------------------------------- #d1 {margin-bottom: 50px ; }#d2 {margin-top: 20px; /*不叠加 只取大的*/}
#------------------------------------------------------------------------------------------#dd {margin: 0 auto; 只能做到标签的水 平居中}</styLe>p{border: 3px solid red;padding-left: 10px;padding-top: 20pxpadding-right: 20px;padding-bottom: 50px;padding: 10px;*/padding: 10px 20px;*/padding: 10px 20px 30px;padding: 10px 20px 30px 40px; /*规律和margin一模一 样*/
}浮动
"""浮动的元素没有块儿级- -说本身多大浮起来之后就只能占多大"""只要是设计到页面的布局一般都是用浮动来提前规划好<styLe>#d1 {height: 200px;width: 200px ;background-coLor: red ;float: Left; /*浮动★/}#d2 {height: 200px;width: 209px;background-coLor: greenyelLow;fLoat: right; /*浮 动*/}
</styLe>
</head>
<body><div id=" d1"></div><div id=" d2"></div>
</body>解决浮动带来的影响
# 浮动带来的影响会造成父标签塌陷的问题
"""
解决浮动带来的影响推导步骤1.自己加一个div设置高度2.利用clear属性#d4 {clear: left; /*该标签的左边 (地面和空中)不能有浮动的元素*/)3.通用的解决浮动带来的影响方法在写htm1页面之前先提前写好处理浮动带来的影响的css代码.clearfix: after{content: ' ' ;display: block;clear: both;|}之后只要标签出现了塌陷的问题就给该塌陷的标签加一-个clearf ix属性即可
上述的解决方式是通用的到哪都- -样并且名字就叫 clearfix
"""会造成塌陷<styLe>body {margin: 0;}#d1 {border: 3px soLid bLack;}#d2{height: 100px;width: 100px; background- color : red;float: Left;}#d3{height: 100px;width: 100px;background-coLor: greenyelLow;float: Left;}
</styLe><body><div id="d1"> <div id="d2"></div> <div id="d3"></div></div>
</body>溢出属性
p{height: 100px;width: 50px;border: 3px soLid red;overfLow: visibLe; 默认就是可见 溢出还是展示overfLow: hidden; 溢出部分直接隐藏overfLow: scroll; 设置成上下滚动条的形式overfLow: auto; 设置成(上下)（左右）滚动条的形式
}#---------------------------------------------------------------------------------------------
<styLe>#d1 {height: 120px;width: 120px;border-radius: 50%;border: 5px solid white ;margin: 0 auto;overflow: hidden;}#d1>img {max - width: 100%}
</styLe><body><div id="d1"><img src="111.jpg" alt= ""></div>
</body>定位
静态
所有的标签默认都是静态的static,无法改变位置
相对定位
相对于标签原来的位置做移动relative
绝对定位（常用）
相对于已经定位过的父标签做移动(如果没有父标签那么就以body为参照)
固定定位（常用）
相对于浏览器窗口固定在某个位置
eg: 右侧小广告
<styLe>body {margin: 0;}#d1 {height: 100px ;width: 100px;background-coLor: red;Left: 50px; /*从左往右 如果是负数方向则相反*/top: 50px; /*从上往下 如果是负数方向则相反*/# position: static; 默认是static无法修改位置position: relative;}
# 相对定位标签 由static变为relative它的性质就从原来没有定位的标签变成了已经定位过的标 虽然你哪怕没有动但是你的性质也已经改变了</styLe>ps : 浏览器是优先展示文本内容的，如果它发现文本内容被挡住了，会想法设法的找个位置展示出来
浮动和定位是否脱离文档流（原来的位置是否还保留）
"""
浮动
相对定位
绝对定位
固定定位
"""
# 不脱离文档流1.相对定位
# 脱离文档流1.浮动2.绝对定位3.固定定位z-index模态框
eg:百度登陆页面其实是三层结构1. 最底部是正常内容(z=0) 最远的2. 黑色的透明区(2-99) 中间层3. 白色的注册区域(z=100) 离用户 最近
<body>{margin: 0;
}
.cover {position: fixed ; Left:0;top:0;right: B;bottom: 0;background-coLor: rgba(0,0,0,0.5);z-index: 99;
}
.modal {background-color: white;height: 200px ;width: 400px;position: fixed;Left: 50%;top: 50%;z-index: 100;margin-Left: -200px ;margin-top: - 100px;
}透明度opacity
#它不单单可以修改颜色的透明度还同时修改字体的透明度
rgba只能影响颜色
而opacity可以修改颜色和字体
<styLe>#d1{background-coLor: rgba(0,0,0,0.5);}#d2 {opacity: 0.1;color: bLue ;}</styLe>
CSS_python相关推荐
最新文章
- 【Infragistics教程】使用可重复使用的自定义组件更快地创建原型
- XV6源代码阅读-中断与系统调用
- Enterprise Library 3.0 体验（3）：使用配置文件的Validation Application Block
- python中x,y=y,x的交换原理
- Java使用strategy模式构造程序
- Silverlight三维柱状图3D饼图的Silverlight图表组件案例
- java ab与ab的区别 a|b与a||b的区别 break、continue、return
- python基础数据结构互转和2、8、10、16进制互转
- MySQL 用gourp by分组后取某一字段最大值
- 程序执行的过程分析--【sky原创】
- 台式计算机颜色如何矫正,显示器颜色校正,详细教您怎么校准显示器颜色
- 创建qt DLL文件，并在代码中调用
- linux测速,linux环境下使用speedtest测速
- React Native版本升级
- 红帽linux卸载软件命令,好记性不如烂笔头- linux 下rpm软件的安装和卸载 rpm --force -ivh ......
- 管理系统页面布局 html,25 个精美的后台管理界面模板和布局
- WebStorm快捷键及配置
- C语言 7-7 书号判断与纠错
- 元素节点，属性节点，文本节点，文档节点，分别的意思
- 节日促销礼品选择的七大注意事项