CSS_python
沈自珍
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 { 同级别下面所有的span
color: 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-255
color: 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; 上下左右全是0
margin: 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: 20px
padding-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>
类似资料：