CSS入门

CSS入门

CSS选择器

1. 元素选择器
   

2. id选择器
   

3. class选择器
   

4. 子元素选择器
   父元素与子元素必须用空格隔开，从而表示选中某个元素下的子元素。
   

5. 相邻选择器
   相邻选择器，就是选中该元素的下一个兄弟元素，在这里注意一点，相邻选择器的操作对象是该元素的同级元素。
   

6. 群组选择器
   两个选择器之间必须用“,”（英文逗号）隔开
   

CSS文字属性

属性	说明	举例
font-family	字体类型	“font-family:微软雅黑;”
font-size	字体大小，一般是px为单位，还可是em，百分比	“font-size:15px;”
font-weight	字体粗细，一般仅用到bold、normal这两个属性值	“font-weight:bold;”
font-style	字体斜体，属性取值：normal（默认值，正常体），italic（ 斜体），oblique（将字体倾斜，将没有斜体变量（italic）的特殊字体，要应用oblique）	“font-style:italic;”
color	color共有2种取值，一种是关键字取值，例如“color:red;”；另外一种是十六进制颜色值，例如“color:#F1F1F1;”	“color:blue;”

CSS段落属性

属性	说明	举例
text-decoration	none：默认值，可以用这个属性值也可以去掉已经有下划线或删除线或顶划线的样式 underline：下划线 line-through ：删除线 overline：顶划线	使用“text-decoration:none”这个属性值可以去除a标签的默认样式
text-transform	none 默认值，无转换发生 uppercase 转换成大写 lowercase 转换成小写 capitalize 将每个英文单词的首字母转换成大写，其余无转换发生	text-transform:属性值;
text-indent	控制文本首行的缩进，像素为单位	text-indent:像素值
text-align	控制文本的水平方向的对齐方式：左对齐、居中对齐、右对齐	text-align:属性值
line-height	是行高，而不是行间距	line-height:像素值

CSS背景样式

属性	说明	举例
background-image	定义背景图像的路径	background-image:url(“图像地址”);
background-repeat	可以设置背景图像是否平铺，no-repeat 表示不平铺repeat 默认值，表示在水平方向（x轴）和垂直方向（y轴）同时平铺repeat-x 表示在水平方向（x轴）平铺repeat-y 表示在垂直方向（y轴）平铺	background-repeat:取值
background-position	设置背景图像的位置，只能应用于块级元素和替换元素。其中替换元素包括img、input、textarea、select和object。取值包括像素值和关键字	background-position:80px 40px; background-position:right center;
background-attachment	设置背景图像是随对象滚动还是固定不动，有2个属性值，scroll表示背景图像随对象滚动而滚动，是默认选项；fixed表示背景图像固定在页面不动，只有其他的内容随滚动条滚动	background-attachment:scroll/fixed;

超链接样式

1. 如何去除超链接下划线
   在CSS中，一般使用“text-decoration:none”来去除超链接下划线。
2. 定义超链接伪类
   属性 说明
   a:link 定义a元素未访问时的样式
   a:visited 定义a元素访问后的样式
   a:hover 定义鼠标经过显示的样式
   a:active 定义鼠标单击激活时的样式
   必须按照“link、visited、hover、active”的顺序进行，口诀“love hate”
3. 一般情况下，我们只用到2种状态：未访问状态和鼠标经过状态。未访问状态，我们直接在a标签定义就行了，没必要使用“a:link”。鼠标经过状态使用 ：hover
4. :hover伪类
   “:hover”伪类可以定义任何一个元素在鼠标经过时的样式，“元素”可以是任意的块元素和行内元素。

鼠标样式

一般只用到“default”和“pointer”这两个属性值。

图片样式

1. 图片水平对齐text-align

• text-align一般只用在两个地方：文本水平对齐和图片水平对齐。也就是说，text-align只对文本和img标签有效，对其他标签无效。
• 语法：text-align:属性值
• 属性取值：
  left 默认值，左对齐
  center 居中对齐
  right 右对齐
• 很多人都以为设置图片水平对齐是在img标签设置，其实这是错误的。大家记住，图片是要在父元素中进行水平对齐的。在这个例子中，img元素的父元素是div，img元素是相对于div元素进行水平对齐的。因此要想对图片进行水平对齐，就要在父元素（div元素）中设置text-align属性。

2. 图片垂直对齐vertical-align

• vertical-align属性定义是：vertical-align属性定义行内元素相对于该元素的垂直对齐方式。
• 属性取值：
  top 顶部对齐
  middle 中部对齐
  baseline 基线对齐
  bottom 底部对齐

表格样式

1. 表格边框合并border-collapse

• 属性值：
  separate 默认值，边框分开，不合并
  collapse 边框合并，如果相邻，则共用一个边框
• 只需要在table元素中设置border-collapse属性值就行

2. 表格边框间距border-spacing

• 该属性指定单元格边界之间的距离。当只指定了1个像素值时，这个值将作用于横向和纵向上的间距；当指定了2个length值时，第1个作用于横向间距，第2个作用于纵向间距。
  
• 只需要在table元素设置就可以生效，没必要在th、td这些元素中设置，造成代码冗余。

3. 表格标题位置caption-side

• 属性值：
  top 默认值，标题在顶部
  bottom 标题在底部
• 可以在caption元素或者table元素中设置，效果是一样的。但是一般情况下我们都在caption元素中设置。

CSS盒子模型

• 外边距折叠现象——塌陷现象
  
• 外边距折叠现象——合并现象
  

结构伪类选择器

伪元素