web之css基础

css

**一.CSS样式规则：**选择器{属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

二.引入CSS样式表

1. 行内式
   语法格式:
   <标记名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”> 内容 </标记名>
2. 内嵌式
   语法格式:
   < head>
   < style type=“text/css”>
   选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
   < /style>
   < /head>
3. 链入式
   语法格式:
   < head>
   < link href=“CSS文件的路径” type=“text/css” rel=“stylesheet” />
   < /head>

三.CSS基础选择器
要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器。

标记选择器	标记名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
类选择器	.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
id选择器	#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
通配符选择器	*{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

• 选择器示例

选择器示例	示例说明
a:link	选择所有未访问链接
a:visited	选择所有访问过的链接
a:active	选择活动链接
a:hover	选择鼠标在链接上面时

怎样解决超链接访问过后hover样式不出现的问题？
要按照“爱恨准则”link、visited、hover、active放置。

四.CSS字体样式属性

属性	用途
font-size	用于设置字号大小
font-family	用于设置字体样式
font-weight	用于定义字体的粗细
font-variant	用于设置变体（定义小型大写字母）
font-style	用于定义字体风格 (如设置斜体、倾斜)
font	用于对字体样式进行综合设置

• 消除浮动三行代码

用在大盒子

.clearfix::after {/*方法一（对父元素应用after伪对象生产式）*/
    content: "";
    display: block;/*表示显示模式，变为块级元素。display: none  表示隐藏*/
    clear: both;/*清除样式*/
}
.clearfix{/*方法二,都一样用在父元素*/
	overflow:hidden;/*清除浮动，隐藏溢出*/
}

浮动的元素要想居中，必须相对定位

五.CSS文本外观属性

属性	用途
color	用于定义文本的颜色
letter-spacing	用于定义字间距，所谓字间距就是字符与字符之间的空白
word-spacing	用于定义英文单词之间的间距，对中文字符无效
line-height	用于设置行间距，就是行与行之间的距离，即字符的垂直间距(单位像素px)
text-align	设置文本内容水平对齐，相当于html中的align对齐属性
text-transform	控制英文字符的大小写
text-decoration	设置文本的下划线，上划线，删除线等装饰效果
text-indent	设置首行文本的缩进
white-space	设置空白符的处理方式
background-color	定义背景颜色
margin:0 auto	实现块元素水平居中
opacity:0.5	实现半透明度

• display之属性介绍
  display三种属性介绍

属性	效果
display:none	隐藏这个元素
display:block	显示这个元素并把它变成块级元素
display:inline	使元素变成行内元素
display:inline-block	变成不独占一行的块级元素

• 边框属性

样式属性	常用属性值
边框样式：border-style:	none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线
边框宽度：border-width:	像素值
边框颜色：border-color:	颜色值
边框圆角border-radius:	像素值
综合设置边框：border:四边宽度 四边样式 四边颜色;

为了更方便地控制网页中的元素，制作网页时，通常先清除元素的默认内外边距。

*{
	padding:0;         /*清除内边距*/
	margin:0;          /*清除外边距*/
}

• 背景属性
  在CSS中，不仅可以将网页元素的背景设置为某一种颜色，还可以将图像作为网页元素的背景，通过background-image属性实现。
  background-image :背景颜色属性
  如下代码：

body
{
background-color:#CCC; 
background-image:url(images/jianbian.jpg);
}   

默认情况下，背景图像会自动向水平和竖直两个方向平铺。如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制。

元素	属性
background-repeat	图像平铺属性
background-position	图像位置属性
background-attachment	图像固定属性

六.定位position

static	静态定位（不定位）
relative	相对定位（用于父元素）
absolute	绝对定位 （用于子元素）
fixed	固定定位

（父相子绝）
设置块元素居中

div{
left:50%;
top:50%;
}

• 可以通过四个CSS属性对设置其位置：
  - left
  - right
  - top
  - bottom

• 定位下的居中
  某个方向居中：
  1.定宽（高）
  2.将左右（上下）距离设置为0
  3.将左右（上下）margin设置为auto
  如想要左右居中则设置left:0，right:0；再设置margin:0;
  绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

• 绝对定位 absolute
  相对定位与绝对定位是合在一起的（父相子绝）相对
  相对定位做绝对定位的包含块
  就是说绝对定位的上一级的块要定义relative
  脱离原来的位置进行定位(别的元素直接填充进去)
  最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位

• 固定定位 fixed
  其他情况和绝对定位完全一样。
  包含块不同：固定为视口（浏览器的可视窗口）
  相对于整个页面居中（上下拉也不会改变位置）

• 相对定位 relative
  保留原来位置进行定位
  相对于自己原来的位置进行定位

• 补充
  绝对定位、固定定位元素一定是块盒
  绝对定位、固定定位元素一定不是浮动
  没有外边距合并