CSS笔记
①CSS引入方式
1）（最常用）在<head>元素下引入：【 <link rel="stylesheet"
href="xx.css"> 】
3）在CSS文件中导入【 @import url(xx.css) 】（语句需写在css文件的开头）
3）在style元素下写样式【 <style>...</style> 】
2）在元素标签里直接设定
【 <p style="color:
red"></p> 】
②元素选择器可以共用同个规则
eg.
h1, h2, h3 {
……
};
③类选择器和ID选择器
一种ID选择器一般只能存在一个，而类选择器可以多个
类选择器：
1）：单个选用类时用【.】选中即可；
eg. <div class=”a”>…</div>
用【.a{…}】选中
2）多个选用类时用【.a.b{…}】表示，意味着当同时选用类a和类b的时候再定义一个新规则;
.a .b{…}】表示在类a之下寻找类b，与上面表达的意思不同）
ID选择器：
eg. <div id = "a"></div>
CSS中用“#”号选中 【 #a{...} 】
④属性选择器
用于给属性添加规则
1）【[A属性] {…} 】
选中A属性，给这个A属性指定规则
2）【[A属性=”B值”]】
给完全等于“B值“的A属性添加规则
3）【[A属性*=”B值”]】
给只要值中出现了有“B值“的A属性添加规则
4）【[A属性^=”B值”]】
给值中以“B值“开头的A属性添加规则
5）【[A属性$=”B值”]】
给值中以“B值“结尾的A属性添加规则
eg.
1）
一般网址是红色的，但以"http:/ /abc. com"开头的网址标为蓝色
2）
Submit按钮设置为没有边框，text按钮设置为站屏百分比和五像素边框
⑤后代选择器
1）【.a * { … }】
选中a元素下的所有元素
1.2）【.aside > *{ … }】
选中aside下的所有儿子元素（不包括孙子以及之下的元素）
2）【.a .c { … }】(中间一定要加空格)
选中a元素下的c元素
⑥相邻选择器及通用相邻选择器
1）用“+”来选择紧接在某元素后的一个兄弟元素
eg.选择类a的后一个相邻的兄弟div：【 .a +
div {...} 】
2）用“~”来选择紧接在某元素后的所有兄弟元素（平行元素）
eg.选择类a后面所有的兄弟div：【 .a ~
div {...} 】
⑦伪类选择器
用“:”来选择某伪类
常用伪类eg.
【 a:link {...} //未访问过的链接
】
【 a:visited {...} //已访问过的链接
】
【 a:hover {...} //鼠标移动到链接上
】
【 a:active {...} //鼠标点击链接瞬间
】
【 input:focus {...} //鼠标选中输入框
】
（ps： a:hover
必须被置于 a:link 和 a:visited 之后，a:active 必须被置于 a:hover 之后；也就是 link->hover->active）
⑧伪元素选择器
用“:”或“::”来选择某伪元素
常用伪元素eg.
1）文段首个字母大写
p: first - letter { … }
2）为某个类的内容尾端全部都添加上新增内容
.[类名] : after { content : “[需要新增的内容]”; …[其他样式规则] : color : red; …… }
3）为某个类的内容开头全部都添加上新增内容
.[类名] : before { content : “[需要新增的内容]”… [其他样式规则] : color : blue; …… }
4）定位到没有署名的类
[例子分隔符]
<div>
<p>1</p>
<p>2</p>
<p>3</p>
</div>
[例子分隔符]
1、选中 div中的最后一个段落
div p : last – child { ... }
2、选中 div中的第一个段落
div p : first – child { ... }
3、选中div中的第n个段落
div p : nth-child (n) { …}
⑨选择器权重
style > ID选择器 > 类选择器/伪类选择器/属性选择器 > 元素选择器
<a style> > #a > .a > div
⑩字体属性
p {
字体
font-family: 【”微软雅黑”, “Microsoft Yahei” , a , b …】
字体粗细
font-weight:【100-900 //范围 , normal //正常粗细 , bold //粗体】
字体大小
font-size: 【12px ， 100% ， inherit //继承，母元素多大就多大】
}
⑩①文字属性
p {
对齐方式（默认左对齐）
text-align: 【right】、【center】、【justify】//俩端对齐
行高
line-hight: 【2】 //当前行高为字体大小的俩倍 、【10px】 //10像素的行高
文字装饰
text-decoration: 【none】、 【underline】 //下划线、 【overline】 //上划线 、【line-through】//删除线
}
⑩②display属性
隐藏一个元素：none、 块：block、 行内元素：inline、 行内块元素：inline-block
1）none
用于隐藏一个元素，例如：网页上要叉掉广告、弹出一个可以关掉的通知提示等。
2）block
div默认是block，占宽百分百， 如果不能占百分百行宽，就会另起一行。可以强制改宽的像素，但是还是占整宽（默认像素整宽）。
3）inline
可以贴着文字或者元素，是可以在同一行的，设置padding的话也只会在左右两边有距离，上下是不生效的。 一般用于文字等
4）inline-block
可以贴着文字或者元素，是可以在同一行的，设置padding可以上下左右生效。 一般用于导航栏的链接之类的。
⑩③框
div {
background:#000;
//内容区的宽高
width: 100px;
height: 100px;
padding: 20px;
border: 5px dashed #777; //dashed是外边框的样式，这是长方形的虚线边框
margin: 20px;
}
浙公网安备 33010602011771号