CSS基础

一、CSS选择器

1.基础选择器

(1).通用选择器

选择html文件内所有元素

• 常用css样式重置

*{
	margin:0;
	padding:0;
}

(2).标签选择器-1

• 直接使用元素的标签名当做选择器使用
• 弊端一旦使用，所有的相同标签都会应用该样式
• 权重值：1

h1{样式列表}
body{样式列表}

(3).ID选择器-100

• 使用标签中的id属性为标签指定id名
• 权重值：100
• 只能为当前标签指定样式

#id名{样式列表}

(4).类选择器-10

• 使用标签中的class属性，被标签指定类名，可以是多个类，多个类名用空格分开
• 权重值：10

.类名{样式列表}

(5).群组选择器

• 把需要共同有相同样式的选择器用逗号连接在一起
• 群组选择器可以连接各种选择器类型

div,p,h5,span{样式列表}

2、关系型选择器

(1).后代选择器

• 后代选择器，可以通过第一个祖先元素找到后代元素，中间需使用空格分隔
• 弊端：后代包括太宽泛，如果使用标签作为后代选择器，则可发生选择混乱

祖先选择器 后代选择器{样式列表}

(2).子代选择器

• 子代选择器，父级元素选择器>号后跟子集元素选择器，可以多层使用

父级元素选择器 > 子级元素选择器{样式列表}

(3).兄弟选择器

• 某选择器 后面的所有兄弟选择器，只会选择到后面的兄弟，不会选到前面的兄弟

某选择器 ~ 该元素后面的兄弟元素{样式列表}

(4).相邻兄弟选择器

• 选择器后紧紧挨着的兄弟元素会被选到，前提是该兄弟的选择器使用争取

某选择器 + 该元素后面的兄弟元素{样式列表}

3.伪类选择器

• 伪类选择器是作用在同一个元素上，

选择器：伪类{样式列表}

• a标签的四种状态

a:hover 鼠标悬停的状态
a:link 未激活的状态
a:active 激活状态
a:visited 访问之后的状态

a.静态伪类选择器

-a:hover 鼠标悬停的状态

• a:visited 访问之后的状态

b.动态伪类选择器

• a:hover 鼠标悬停的状态
• a:active 激活状态
• input:focus 获取焦点状态

4.伪元素选择器

• 伪元素指用于设置元素的“指定部分”样式

/* 在元素前面的部分 */
选择器::before{content:"";}/* content必须加才生效 */
/* 在元素后面的部分 */
选择器::after{content:"";}/* content必须加才生效 */

5、CSS权重

(1).优先级的比重

• 按照css引用方式分：内联样式>内部样式>外部样式
• 按照选择器权重分：id(100)>class(10)>标签(1)

(2).优先级原则

• 相同选择器，多个样式但不重复，会都应用
• 相同选择器，相同值，会以后写的优先
• 指定样式大于继承样式
• 多个选择器一起使用的时候，要计算权重值来推算它的优先级

二、尺寸

1.宽度和高度

• 定义宽度width和高度height可以使用，长度单位：px，pt，rem，em，%等等
• %比是相对位父级
• 一般pc端见面使用px
• 移动端使用em，rem，vw，vh等单位

2.最小和最大宽高

• 定义浏览器窗口中最小显示和最大显示的宽度和高度，最小不满足时出现横向或竖向拖动条
• max-width最大宽度
• max-height最大高度
• min-width最小宽度
• min-height最小高度
• 不允许出现负值

三、颜色

1.英文颜色

• 常用red
• 透明色
  颜色地址

2.十六进制颜色

• #rrggbb #必须写
  • 1、2位代表红色范围
  • 2、4位代表绿色范围
  • 3、6位代表蓝色范围
  • 颜色地址
• 十六进制颜色范围是0-9，a-f
• 如果三组都是相同的值，可以简写

3.rgb颜色

• rgb()函数 ，三个参数，用逗号分隔
• r代表红色，g代表绿色，b代表蓝色色值
• 取值范围0~255之间的256个数
• rgba()a代表透明度，取值0~1之间的数字，0
  代表完全透明

五、边框

1.边框的属性

• border-width边框宽度
• border-style边框样式，solid实绩 dashed虚线 dotted点点
• border-color边框颜色

六、元素的分类

1.元素的显示属性

• display元素以什么方式显示
  • display:block;以块级元素方式显示
  • display:inline;以内联元素方式显示
  • display:inline-block;属于行内元素，但以块级显示，俗称行内块
  • display:none;不显示

2.内联元素

• 内联元素也可以叫行内元素
• 特点
  • 设置宽度高度无效(行内志级显示元素除外)
  • 和其它内联样式横向从左向右排列
  • 设置上下内，外边距无效
  • 常见的行内元素span a

3.inline-block

• 它是行内元素的一种
• 不自占一行横向从左向右排列
• 可以设置宽高、以及内外边距
• 常见的行内块级显示元素：img button input
• 会出现幽灵空白节点：
  • 把img标签变成块级元素 display:block;
  • 父级元素font-size:0;去掉空白节点

4.块级元素

• 每个元素都独占一行，后面的元素也只能另起一行
• 元素的宽度、高度以及内外边距都可以设定
• 块级元素宽度不设定，为父级元素宽度
• 高度不设定为内容高度，如果没有内容，高度为0
• 常见的志级元素div p h1~h6 ul li table

七、溢出

• overflow:hidden;溢出隐藏
• overflow:scroll;x轴y轴都出现手动条
• overflow:auto;只有溢出的方向出现拖动条
• overflow:visible;溢出默认显示
• 单独设定x轴或者y轴的溢出：
  • overflow-x:auto;
  • overflow-y:hidden

八、圆角

1.元素的四个角

• border-top-left-radius左上角
• border-top-leftright-radius右上角
• border-bottom-left-radius左下角
• border-bottom-right-radius右下角

2.元角的取值

• 1个值代表四个角
• 2个值代表左上右下，右上左下
• 3个值代表左上，右上和左下，右下
• 4个值代表左上，右上，右下，左下

3.圆角的极限

• 圆形，元素高宽一致border-radius:50%;

九、盒子阴影

1.盒子阴影的属性

 box-shadow: 3px 3px 2px 0 green inset;
   /*x偏移量 y偏移量 羽化 扩散 颜色 方向8*/

2.多阴影

box-shadow: 5px 10px 10px 0 red, 
3px 4px 5px 15px green, 
3px 5px 0 10px blue;