Python web前端 02 CSS

Python web前端 02 CSS

一、选择器

　　1、CSS的几种样式（CSS用来修饰、美化网页的）

#建立模板
复制内容--->SETTING---> Editor ----->font (SIZE：修改字体大小)----> color scheme（背景）---->File and Code Templates(建立模板) ----->Scheme(改成Project)---->将刚复制的内容粘贴到上面，那么以后创建的html文件就自动变成那么模板了

#在head上面的style里面设置的样式叫做内嵌的CSS样式
#在body里面自己设置的style样式叫做行间样式
 
#基于这种原理，一个网页的CSS样式成千上万，所以需要在外面创建一个stylesheet表来设置CSS，然后在原来的html文件中引入这个CSS，在title下面输入<link rel="stylesheet" href="（相对路径中的CSS文件名）">

#关于CSS样式设置优先级的问题
#都是对div（或任何其他的）的修饰的时，遵循从近原则，哪里离body近就选择哪个，而行间样式的优先级是最高的，但只能作用于修饰的单个div

　　2、基本选择器：元素选择器、通配符选择器、class选择器、id选择器

#元素选择器(标签选择器)div p
#选择相同的元素对相同的元素设置一种css样式，选中页面中所有的此元素
 
#通配符选择器 *   ：所有的行间距都为0（把这段话加到模板里面）
*{ margin:0;padding:0;}
 
#class选择器
#给标签设置一个class属性，在写样式时，在class名字前面加个“.” ，一般给具有相同属性的元素设置同一个class
 
#id选择器
#给标签设置一个id属性，写样式时要在id名字前加个“#”，id名字不要重名
 
#优先级：id> class>标签选择器div p >通配符选择器 *

　　3、复杂选择器：群组选择器、兄弟选择器、子代选择器、相邻选择器、子代选择器

#群组选择器 ，
#若希望div和p标签样式一样，可以再上面的style上面直接用div,p{设置样式}，用逗号隔开，两者样式相同，三者以上也都可以
 
#兄弟选择器 ~
#若想要设置一个div下面的p标签的样式，可以在上面的style内添加div~p{设置样式}，只会选择后面的，不会选择前面的
 
#子代选择器 >
#div下面的内嵌div若要设置样式，div>div{设置样式}，同样继续内嵌的可以继续用>号，div>div>span{设置样式}
 
#相邻选择器 +
#若要设置某个div相邻的p标签的样式，可以用div+p{设置样式}，只要满足条件都会触发，也可用两个+号，表示"三连坐"
 
#后代选择器 空格
#现在有ul下面3个li，ol下面3个li，若要设置ul下面的li的样式，可以再上面的style上 用ul li{设置样式}，这个子代选择器可以用多个空格；若要找ul里面的class，需要直接用 ul.box li{设置样式}

　　4、伪类选择器

#伪类选择器 a标签
#未被点击的颜色  a:link{color:blue;}
#已被点击的颜色  a:visited{color:blueviolet;}
#鼠标悬停其上的颜色 a:hover{color:red;} 重点
#鼠标已经按下但是还没有释放的颜色 a:active{color:yellow;}
 
#如果要四个都设置必须以这个顺序来设置，便捷记忆方法LoVe HATe

#同样可以给div添加hover属性，鼠标悬浮上面变色
div:hover{设置样式} #这是改变div
 
div:hover p{设置样式} #这是改变div的后代p，简而言之就是找到p所在的位置
 
#修改悬浮目标上鼠标变形手指，在hover目录下改
div:hover{cursor:pointer;} #pointer表示手指，help表示帮助（？），wait表示等待（转圈圈），default表示默认

　　5、复杂选择器的优先级

#复杂后代选择器
#1、先比id（最高位） class（中间位） tagName（标签个位数）
#2、id选择器个数不相等，id越多，优先级越高
#3、id选择器个数相同，则看class，class多的优先级高
#4、class个数相同，就看tagName个数
#5、最后就是从近原则

　　6、复杂选择器的优点：快速找到目标

二、table表格

#table标签
#分为 thead（头部） tbody（身体） tdoot（尾部）这些可写可不写，为了便于修改内部的tr而设置的
#tr（行）th（单元格） td（多用于里面的数据）
 
#加边框
<table border=""> ...  </table>#加个border即可 ，border="0"就是无边框，也可以在style里面设置table{border_collapse:collapse;}#collapse表示边框合并，如果相邻的话共用一个框，separate表示默认值，边框分开，不合并，一般开发不选择默认；text-align:center表示文字水平居中
 
#合并单元格
#行合并
#如果说要合并行，在那一行的td里面设置属性 rowspan="2" 行合并2行，原来的数据会被挤走，所以记得注释掉
 
#列合并
#在那一列的td里面设置属性 colspan="3" 列合并3列，原数据被挤走同理要注释

#表格名字
#在thead前面加上caption，写上名字即可