初识CSS（二）

1.选择器

1.1基础选择器

• 标签选择器（元素）

h1{

font-weight:bold;

}

• ID选择器

#id名称{

color：gray;

}

通常用于is中

• 类选择器（class）

.class名称{

font-size:20px !important; //优先级最高

line-height:; /行高，p中自动有设置

}

在css中应用广泛

1.2.选择器优先值

！important>id>class>元素>浏览器默认样式

1.3.层次选择器

• 后代选择器（子孙） 有div中的所有p标签才满足

div p{

fnt-size：30px;

}

• 子选择器（儿子） eg div > p 离div最近的一层p 只选择第一代元素

div >p{

fnt-size：30px;

}

• 群组选择器（分组） 多个内容都选择

div,h1,p{

color:red;

}

1.4.统一设置页面

*{

margin:0；

padding:0;//去掉边距

font-size:20px;

}

2.基础属性

2.1背景

• backgroud-color: //背景颜色

red;

#ffbb55(可简写为#fb5)

rgb(255,0,0)

rgba(255,0,0,5)

HSL(色调，饱和度，明度)

• backgroud-image: //背景图片路径

url('png/img/bg')

注：背景图片和颜色只能选择其一

• backgroud-repeat: //背景图片是否平铺以及平铺样式

  repeat; //default

  no-repeat; //不平铺

  repeat-x; //水平平铺

• bckgroud-position: //背景图片位置

left bottom; //左里部

right top; //右上角

x%y%; //左上角是0%0%，右下角是100%100%

xpos ypos //像素（不是响应式布局，是一种绝对位置，有可能超出背景)

• backgroud-attachment: //背景图片滚动

scroll; //

2.2文本

• color： 同上背景颜色定义

• text-align:

  left; default

  right;

  center;

• text-decoration:

none; fault

underline; //下划线

line-through; //穿过文本的一条线

• line-height: //行高，直接设置值即可

%

倍数

• text-shadow: //阴影，设置艺术字

水平位置偏移量 垂直位置偏移量 模糊半径 阴影颜色

• direction: //垂直方向排列

ltr; //default

rtl; //从左到右

2.3字体

• font-size:

16px；

1.5em;

150%

em 单位，1em=16px 使用px较少，因为px大小为绝对值，em可以自动缩放，是一种响应式布局

• font-family： //字体

"宋体"

“微软雅黑” 谷歌浏览器默认值

"Times New Roman"

"黑体"

• font-style:

  italic; //斜体，等价于<em>

• font-weight:

normal; //default

bold; //700

2.4链接(以下适用于所有selector)

• a:link 未访问

• a:visited 已访问

• a:hover（必须在前两个之后）鼠标悬停

• a:active（必须在上一个之后） 鼠标点击

2.5列表

• 属性 list-style-type

none 文字前无任何样式标记

disc 无序默认 实心圆点

decimal 有序默认 数字

• list-style-image:

url('logo.png') 根据项目文字或内容大小，先处理图片大小

2.6display: //显示 块元素和内联元素

• 隐藏元素：

h1.hidden{visibilty：hidden;}

h1.hidden{display:none;}

• none

• inline

• inline-block

• block

• flex(弹性盒子模型)

• visibility：hidden

2.8 表格

border-collaspse: collapse;

border: 1px solid black;

2.9盒子模型

• margin

left

top

right

bottom

• border

border-

border-

none

dotted

dashed

double

border-

• padding

left

top

right

bottom

2.10定位（位置的四个属性如果没有position属性声明，是无用的）

• position

static 静态定位，默认无定位

absolute 绝对定位

relative 相对定位

fixed

• left

px/em/vh.vw/%/vmin/vmax

• top

• right

• bottom