css初识

css体验

css作用:
美化网页,布局页面
选择器{
      css属性
   }
选择器 {
     属性: 值;
     属性: 值;
     ...
}
注意事项:
CSS 标点符号都是英文状态下的
每一个样式键值对写完之后，使用;进行结束
属性名和属性值之间使用:分隔.

 <div>抽烟只抽炫赫门,一生只爱一个人</div>

div{
    color:red;
    font-size:30px;
}

css引入方式

内嵌式
	作用于当前页面,后续小项目可以使用.	
外链式
	作用于多个页面,后续大项目使用
需要使用link标签引入外部的css文件
行内式
	作用于当前标签,不建议使用.后续配合js.

基础选择器

标签选择器 类选择器 id选择器 通配符选择器

标签选择器
标签名{
    属性:属性值;
    属性:属性值;
    ...
}
例如 div{color:red;}

类选择器
.类名{
  属性:属性值;
  属性:属性值;
    ...
    /*
    	一个标签可以有多个类名 但是多个类名之间用空格隔开
       一个类名可以多次调用(一个类名可以作用在多个标签身上)
    */
}
例如 .box{color:pink;}

id选择器
#id名{
  属性:属性值;
  属性:属性值;
    ...  
}
例如 #box{color:green;}

通配符选择器
*{
    属性:属性值;
  	属性:属性值;
    ...
    /*后续使用通配符清除内外边距*/
}

字体属性

字体大小
	font-size:20px;
字体粗细
	font-weight:400(normal)|700(bold)
字体样式
	font-style:normal|italic 
字体系列
	font-family:字体系列1,字体系列2..;
字体连写
font:style weight size family
font:italic 700 60px 宋体;
字体连写不能随意颠倒顺序,必须遵循;
字体连写必须保留size和family 这2个属性.

文本缩进

段落文本首行缩进
text-indent:2em;

文本对齐方式

text-align:left|center|right;
文本水平居中总结
如果想要 文本 span标签 a标签  img标签 input标签水平居中 对齐,给以上元素的父元素设置text-align即可.

文本装饰属性

下划线 
text-decoration: underline;
无装饰线
 text-decoration: none;
实际开发应用
取消a标签默认的下划线
a{
    text-decoration: none;
}

行高

行高:设置行间距
line-height:50px;
单行文本垂直居中
行高等于当前盒子的高度
font:style weight size/line-height family
font:italic  700 30px/40px 微软雅黑
行高与字体连写注意覆盖问题.
/* 当前font-size的倍数  */
 line-height: 2;

扩展颜色取值

关键词:
background-color: pink;
rgb:
background-color:rgb(255, 255, 255)
rgba:
 background-color: rgba(0, 0, 0, .5);
十六进制
 background-color: #ff6700