css 初级了解

Css行内样式写法： 

1. 行内样式 在起始标签写一个style属性="样式名1(样式属性):样式值1(属性值);样式名1(样式属性):样式值1(属性值);" key:value

    例如: <h1 style="color:red;background-color:yellow;font-size:50px;">hhh</h1>

缺陷：样式和结构的耦合性太高了，不利于后期的维护

Css内联样式 写法：

     先在head标签之间写一个style标签

style里面 选择器{ 样式内容 }

缺陷：样式和结构在一个文件中

Css外部引用样式

head里引入外部样式<link rel="stylesheet" href="./index.css">

三种基础选择器：

1. 直接拿标签来当选择器的 叫做标签选择器

2. id选择器： 拿id名来做选择器 在id名前面加#就可以了。（id的值不能重复 因为id是唯一的）

     c.类选择器: 拿类名的值来做选择器的 在类名前面+ .(类名是可以重复的)

选择器权重(优先级)

!important > 行内样式(1000) > id选择器(100) > 类选择器(10) > 标签选择器(1)

字体属性

背景颜色：background-color:#f7e479;

元素的宽度 单位是像素：width: 300px;

元素的高度 ：height: 300px;

字体颜色：color: orange;/color: #fba946;/color: rgb(255,0,0);（rgb颜色值0-255之间）

字体大小 ：font-size:40px;

字体类型：font-family:'Cooper Black','华文彩云','楷体';（它会判断用户电脑里是否有第一种字体，如果没有就使用后面的 循环往后面找）

字体的粗细：font-weight:bold;（bold:字体变粗 normal:还原为标准的字体）

字体的倾斜：font-style: italic;（italic：斜体 normal:将斜体文字还原为标准的字体）文本样式：

首行缩进：text-indent:2em;（谷歌浏览器默认一个文字是16个像素）

文本的装饰： text-decoration:

  underline:下划线

 overline:上划线

line-through:删除线

none:去除标签的默认装饰（线条）

文本的转换：text-transform:

lowercase:将所有的英文字母转换成小写的字母

uppercase:将所有的英文字母转换成大写的字母

capitalize:把所有单词的首字母进行大写

文本的方向：direction：

ltr:从当前容器从左向右

rtl：从当前的容器从右向左

字符与字符之间的间距：letter-spacing:40px;

单词与单词之间的距离：word-spacing:40px;

文本的排版：text-align：

left:内容居于当前元素左边

right:内容居于当前元素右边

center：内容居于当前元素的中间

justify：让文本内容实现两端对齐

文本空白处理 ： white-space:

pre:保留空格换行

pre-line:保留换行以后会在前面缩进

nowrap:让文本不要换行 重点

禁止多行文本域的缩放
textarea{
resize:none;
}
单行文本溢出 以省略号的形式展示
   white-space: nowrap;

超链接的伪类：

设置列表前面小圆点的类型 ：list-style-type:

 circle:空心圆,

  square:实心正方体

  decimal：数字

       none：去除前面的符号

前面符号的位置：list-style-position:

inside:让前面的符号进入li内部

outside（默认的）:让前面的符号在li外面

将前面的符号变成小图：list-style-image:url(./icon.png);