关于CSS

一、CSS

Cascading Style Sheets：层叠样式表
用来控制标签样式

二、CSS语法: 键值对

color: red;

三、CSS位置

3.1.行内

<div style="color: blue; font-size: 28px; background-color: aqua;">容器标签</div>

3.2.页内

<style>
    body{
        color: red;
    }
</style>

3.3.外部：单独CSS文件中，用link标签引用

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

// CSS文件中代码
div{
   color: olivedrab;
   font-size: 66px;
   background-color: greenyellow;
}
p{
   color: goldenrod;
   font-size: 2px;
   border: 2px dashed darkolivegreen;
}

四、CSS选择器

4.1.普通选择器

选择某一类标签添加样式: div

<style>
    div{
        color: red;
    }
    p{
        color: blue;
    }
</style>

选择某个类(class)标签添加样式: .test1

<style>
    .test1{
        color: green;
     }
</style>

选择某一 id标签添加样式: #main

<style>
    #main{
       font-size: 40px;
    }
</style>

并列选择器: #main, .test1
id="main" 或者 class="test1" 都会被选中

<style>
    #main, .test1{
        border: 1px solid rosybrown;
    }
</style>

复合选择器: p.test1

<body>
    <p class="test1">我是段落标签</p>
</body>

<style>
    p.test1{
        background-color: yellow;
    }
</style>

后代选择器 div a

<body>
    <div class="test1"> 
        我是div标签 
        <a href="#">我是超链接</a> 
          <div> 
             <a href="#">我是二级链接</a> 
          </div> 
    </div>
</body>
// div里面所有的a，无论多少个层级
<style>
    div a{
        color: red;
    }
</style>

直接后代选择器 : >

<body>
    <div class="test1"> 
        我是div标签 
        <a href="#">我是超链接</a> 
          <div> 
             <a href="#">我是二级链接</a> 
          </div> 
    </div>
</body>

<style>
    // 直接后代 >
    div.test1>a{
        color: green;
    }
</style>

相邻兄弟选择器: div + p
- 第一个p标签会被选中

<body>
    <div>我是div标签</div>
    <p>我是段落标签p1</p>
    <p>我是段落标签p2</p>
</body>

<style>
    div + p {
        color: red;
    }
</style>

属性选择器: div[name]

<div name="Jack">我是div标签</div>
div[name]{
   color: red;
}

通配选择符： *

//级别非常低，性能比较差 
*{  
  font-size: 30px ;
}

4.2.伪类选择器

focus 向有键盘输入焦点的元素添加样式

<style>
input:focus{
    outline: none; // 去除外线条
    width: 500px; // 改变宽度和高度
    height: 50px;
    font-size: 20px; // 改变文字的大小
}
</style>

hover 鼠标移动到元素上时候，改变元素的样式

#main:hover{
    width: 300px;
    height: 200px;
    background-color: aqua;
}

五、选择器的优先级别

选择器的权值加在一起，大的优先。如果相等，后定义优先
- 通配选择符：0
- 标签： 1
- 伪元素： 1
- 类： 10
- 属性： 10
- 伪类： 10
- id： 100
- important： 1000
important > 内联 > id > 类 > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承

六、CSS属性

6.1.可继承属性

所有标签可继承
visibility // 元素是否可见
cursor // 显示的光标的类型

<style>
    div{
         visibility: hidden; 
         cursor: help; 
    }
</style>

内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image

6.2.不可继承属性

常用
display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float
不常用
clear、table-layout、vertical-align、page-break-after、page-bread-before、unicode-bidi

七、CSS实战应用-重点举例

1.设置文本中间划杠

text-decoration: line-through; // 中间有线
text-decoration: none; // 无下划线等
text-shadow: 10px 10px 9px purple; // 设置文字阴影

2.首行缩进

text-indent: 2%;

3.处理超出的内容: hidden直接裁剪

overflow: scroll;

5.设置自己的下划线

border-bottom: 1px solid #dddddd;

6.无序列表，去除黑点

ul{
    list-style: none;
}

7.no-repeat:不平铺

background: url("images/bg.jpeg") no-repeat;

8.覆盖一整页

background-size: cover

9.设置边框

border: 2px solid black;

10.设置内边距

padding:10px;

11.设置外边距

margin: 30px;

12.设置透明度

background-color: rgba(255,0,0,1.0);

13.设置圆角

border-radius: 20px;

14.设置上左的圆角

border-top-left-radius: 100px;

15.设置下右的圆角

border-bottom-right-radius: 100px;

16.设置不透明度

opacity: 0.1;

17.设置块阴影

box-shadow: 10px 10px  10px purple;

19.浮动(到父标签的左边和右边，上边，下边)
- 任何标签只要一浮动,类型就会被转为行内-块级标签

float: left;

20.相对浏览器进行定位

position: fixed;

21.停留在父标签的任意位置

/*子绝父相*/
position: relative;
position: absolute;

22.设置水平居中,垂直居中:适用于行内标签和行内-块级标签

text-align: center;
line-height: 200px;

23.设置水平居中,垂直居中:适用于块级标签

// 先设置高度
margin:0 auto;
position left top tanslate

24.设置input的外边框

box-sizing: border-box;

25.伪类: 去除input外边框，设置自定义边框

#main .search input:focus{
    outline: none;
    border:1px solid #3385ff;
}

26.去除按钮边框

border: 0;

27.伪类:去除按钮外边框

.login-btn:focus{
    outline: none;
}

28.字体加粗

/*加粗*/
font-weight: bolder;
/*不加粗*/
font-weight: normal;

29.设置字体

font-family: 'Arial';

30.改变标签的类型

display: inline-block;
display: none; // 设置标签是否显示

31.设置鼠标在图片之上的时候，图片的透明度

#main .normal-search img:hover{
    opacity: 0.5;
}

32.设置标签们的属性（和通配选择符差不多）

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

33.图片居中

vertical-align: middle;

34.导入字体

@font-face {
    font-family: BebasNeue-webfont;
    src: url('../fonts/BebasNeue-webfont.ttf');
}

35.设置背景图片

background: url("../images/pattern.gif");

36.自适应布局

@media screen and (max-width: 1095px){
    #nav ul li a{
        width: 150px;
    }
}

@media screen and (max-width: 844px){
    #nav ul li a{
        width: 60px;
        font-size: 14px;
        height: 35px;
        line-height: 35px;
    }
    #list {
       margin-top: 60px;
    }
}

37.在body中垂直水平居中

#footer{
    background-color: chartreuse;
    height: 60px;
    width: 400px;
    
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

38.动画的过度效果

百度搜索 w3cschool trasform属性，就会出现属性相关用法
transition 自动弹出代码
这是对于不同浏览器的适配
第二个参数表示动画的用时

    -webkit-transition: linear 0.25s;
    -moz-transition: linear 0.25s;
    -ms-transition: linear 0.25s;
    -o-transition: linear 0.25s;
    transition: linear 0.25s;

动画方向

-webkit-transform-origin: center bottom;

设置动画的效果

-webkit-transform: scale(1.5);

39.剪裁超出部分

overflow: hidden;