万哥CSS3笔记

css导入方式

①行内样式（写在需要改变的标签里）

②内部样式（单独写在中）

③外部样式（单独写在.css文件中）

优先级：就近原则，离标签近的生效

选择器

标签选择器 h1 {}

类选择器 .nav {} (nav是标签的属性class=“xxx”)

多个标签可以是同一个class

id选择器 #nav {} 不能复用 唯一

优先级：从高→低依次是id-类-标签

层次选择器

后代选择器 body p {} 选择body下的所有p标签，儿子p，孙子p，只要是p都被选择到

子选择器 body>p {} 选择body下的儿子p标签

兄弟选择器 .class/#id + p {} .active往下的第一个兄弟p标签

通用选择器 .class/#id ~ p {} .active往下的所有兄弟p标签

结构伪类选择器

ul li:first-child {}

ul li:last-child {}

p:nth-child(1) {}选择父级第1个标签，并且是p才生效

p:nth-of-type(1) {} 选择父级第1个p标签，p标签不一定在第一行

属性选择器（常用）

a[id] {} 选择a标签带id的

a[class *= “xxx”] {} 选择所有class里带xxx的标签

a[href ^= http] {} 选择href开头为http的标签

a[href $= pdf] {} 选择href以pdf结尾的标签

span标签：重点要突出的字使用该标签（行内元素）

字体样式

字体

font-family: 汉仪超粗宋简; 

大小

font-size: ;

粗细

font-weight: bold粗体 lighter细体

颜色

color

font：风格 粗细 大小 字体

文本样式

color: rgb(0, 0, 0);

color: rgba(0, 0, 0, 0.5);

text-align: center left right justify两端对齐

text-indent: 2em 首行缩进两个汉字

height/weight：标签的长宽

line-height:行高

text-decoration：underline下划线 line-through删除线 overline上划线 none取下划线

vertical-align: middle; 垂直居中

a:active {} 鼠标按住未释放的操作

a:visited {} 访问过后的操作

a:hover {} 鼠标经过的操作

列表

li中的·

list-style: none清零/circle空心圆/decimal有序列表/square正方形

平铺div

div { 

  background-image:url("");

  background-repeat: repeat-x/repeat-y/no-repeat;

}

指定照片在一个位置

background: red url("images/1.jpg") 2900px 780px no-repeat;

渐变网站

www.grabient.com

盒子模型

margin外边距

padding内边距

border 边框 solid实线 dashed虚线

去掉网页的内边距外边距

*{margin:0; padding:0;}

外边距的妙用：居中元素

margin: 0 auto 自动对齐

圆角边框

border-radius 10px | 50px 20px | 50px 20px 10px 5px

圆

等于weight或height的一半（weight=height）

盒子阴影

box-shadow: 10px横向偏移 10px纵向偏移 1px模糊度 yellow颜色

块级元素：独占一行

h1~h6 p div 列表 ···

行内元素：不占一行

span img a strong em ···

行内元素可以被包含在块级元素，反之不行

span元素无法设置width、height

display: block块元素 inline-block保持块元素特性且可以写在一行 inline行内元素 none消失

float: left左浮动 right有浮动

clear: left清除左侧浮动 right清除右侧浮动 both两侧不允许有浮动 none

☆父级边框塌陷

1.增加父级元素高度（不建议）

2.增加空div 清除浮动 外内边距→0（尽量避免）

3.overflow：hidden隐藏 scroll添加滚动条 auto自动

4.父类添加一个伪类：after 最认可的解决方案

#father:after {

  content: ' ';

  display: block;

  clear: both;

}

display：方向不可控制，但没有塌陷问题

float：方向可控，但要解决塌陷问题

定位

相对定位 相对原来位置进行指定偏移

position:relative 距离 top left right bottom 移动多少px

绝对定位 写死 基于xxx定位

1.没有父级元素定位前提，相对浏览器定位

2.假设父级元素存在定位，相对于父级进行偏离

3.在父级元素范围内移动

z-index：999 层级

opacity:0.5 背景透明度

position:fixed 固定定位：永远固定在浏览器某个位置