CSS样式

---

css分为三大样式：行内样式，页内样式，外部样式

行内样式：

<div style="font-size: 30px; 
color: red; background-color: green;">
1111111111111
</div>

页内样式：在当前页面的\标签中书写，使用\标签包起来

<style>
       div{
          color: purple;
          font-size: 40px;
          background-color: yellowgreen;
       }
       </style>

外部样式：新建一个.css文件，统一在里面进行样式布局,注意在\标签中把该文件引用进来

<link rel="stylesheet" href="css/index.css">

三种样式混合使用时，遵循’就近原则’和’叠加原则’

CSS选择器类型

---

css选择器有很多种类型，主要常用的有：标签选择器、类选择器、id选择器、后代选择器。
格式如下：

 /*标签选择器*/
div{
    color: red;
}
/*类选择器*/
.one{
    color: yellow;
}
/*id选择器*/
#main{
    font-size: 40px;
}
/*后代选择器*/
#test2 div{
    color: green;
}

css选择器遵循:

• 在相同级别:1.叠加原则 2.就近原则
• id选择器> 类选择器 > 标签选择器
• 范围越小,优先级别越高
• 如果属性后面添加了 !important 修饰，则优先级别最高

伪类

---

伪类是对标签的一种响应，有很多种，常用的有：hover，focus等
hover:当鼠标移动到上面的时候响应：

 div:hover{
    background-color: green;
    width: 100px;
    height: 180px;
}

focus：当控件聚焦时响应：

 input:focus{
    outline: none;
    width: 500px;
    height: 300px;
    border: 10px double yellow;
}

标签类型

---

快级标签：常见div等
行内标签：常见span等
行内-快级标签：常见input等

标签类型之间和相互转换，利用display属性，例如，把快级标签变成行内-快级标签：

display: inline-block;

把行内标签变成快级标签：

display: block;

一些CSS属性Tips

---

1.都是隐藏内容，display和visibility的区别：

• display会连同尺寸一起隐藏
• visibility不会隐藏尺寸

2.超出标签的内容处理:hidden, auto；
overflow: hidden;

3.设置去除下划线,用于a标签：text-decoration: none;
4.设置缩进:text-indent: 3%;

5.设置列表的类型: none square；list-style:square;
6.字体加粗： font-weight: bolder;

7.行高,用于垂直居中：line-height: 300px;

8.设置文字阴影, 水平方向 垂直方向 模糊 颜色：
text-shadow: 5px 5px 10px green;

9.设置圆角：border-top-left-radius: 90px;

盒子模型

---

这也没什么好说的，很重要，记住’上右下左’的顺序，IE浏览器的标准和国际的标准不一样。
这里针对居中方式做一下总结：

标签水平居中:

• 行内标签, 行内块级标签: text-align: center;
• 块级标签: margin: 0px auto;

标签垂直居中:

• line-height: 400px;