CSS之我不会

一、选择器

作用：选择页面上的某一个后者某一类元素

基本选择器

1.标签选择器

格式：标签{}

<h1>666</h1>

<style>
 	h1{
 		css语法
 	}
</style>

2.类选择器

格式：.类名{}

<h1 class="name">666</h1>
<style>
	.name{
		css语法
	}
</style>

3.id选择器

格式：#名称{}

<h1 id="name">666</h1>
<style>
	#name{
		css语法
	}
</style>

高级选择器（只说一个id+class组合）

格式：id

<style>
        .demo a{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: aquamarine;
            text-align: center;
            color: gray;
            text-decoration: none;
            margin-right: 5px;
            line-height:50px;
            font: bold 20px/50px Arial;
        }
        /*
        属性名,属性名 = 属性值（正则）
              = 表示绝对等于
             *= 表示包含
             ^= 表示以...开头
             $= 表示以...结尾
             存在id属性的元素
                a[]{}
         */
        a[id]{
        /*
        a标签使用id的元素
        */
            background: deeppink;
        }
        a[id=first]{
            /*
            id=first的元素
            */
            background: greenyellow;
        }

        a[class*="links"]{
            /*
            class 中有links的元素
            */
            background: green;
        }

        a[href^=http]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
        a[href$=pdf]{
            /*
            选中href中以http开头的元素
            */
            background: aquamarine;
        }
</style>

<p class="demo">
    <a href="https://www.taobao.com/" class="links item first" id="first">淘宝</a>
    <a href="" class="links item active" target="_blank " title="test">链接</a>
    <a href="img/hello.html" class="links item">网页</a>
    <a href="img/str1.png" class="links item">png</a>
    <a href="img/str2.jpg" class="links item">jpg</a>
    <a href="abc" class="links item">链2</a>
    <a href="/fy.pdf" class="links item">pdf</a>
    <a href="/quit.pdf" class="links item">pdf2</a>
    <a href="dump.doc" class="links item">doc</a>
    <a href="kiko.doc" class="links item last">doc2</a>
</p>   

二、美化

1.字体 font

1. font-family：字体
2. font-size：字体大小
3. font-weight：字体粗细
4. color：字体颜色

2.文本样式 text

1. 文本对齐方式：text-align：center
2. 首行缩进: text-indent：2em
3. 行高: line-height：300px
4. 下划线:text-decoration

• text-decoration:underline /下划线/
• text-decoration:line-through /中划线/
• text-decoration:overline /上划线/
• text-decoration:none /超链接去下划线/

5. 图片、文字水平对齐

img,span{
    vertical-align: middle;
}

6.文本阴影

<style>
h1 {
  text-shadow: 2px 2px 5px red;
}
</style>

<h1>文本阴影效果！</h1>

3.超链接伪类

	<style>
        /*超链接有默认的颜色*/
        a{
            text-decoration: hotpink;
            color: #000000;
        }
        /*鼠标悬浮的状态*/
        a:hover{
            color: dodgerblue;
        }
        /*鼠标按住未释放的状态*/
        a:active{
            color:green
        }
        /*点击之后的状态*/
        a:visited{
            color:mediumpurple;
        }
    </style>

列表 ui li

有序 ui li
无序 ol li
list-style-type: circle
list-style-type: square
list-style-type: upper-roman
list-style-type: lower-alpha

背景

1.背景颜色 background-color

2.透明度 opacity

3.背景图片 background-image: url("name.jpg")

三、盒子模型

• margin：外边距；
• padding：内边框；
• border：边框；

margin-left/right/top/bottom 表示四边，可分别设置，也可以同时设置如下 .

/* 分别表示上、右、下、左；从上开始顺时针 */
margin:0 0 0 0 

/* 例1: 居中 auto表示左右自动 */
margin:0 auto 
/* 例2：表示上、右、下、左都为4px */
margin:4px 
/* 例3: 表示上为10px，左右为20px，下为30px */
margin:10px 20px 30px 

四、浮动float 可以管横着排列的

可以创建浮动框，将其移到一边，直到左边缘或右边缘触及包含块或一个浮动框的边缘
添加浮动之后，属性标签具有块级元素的特征

浮动属性

属性值	描述
none	元素不浮动（默认）
left	元素左浮
right	元素右浮

文档流

1.块级元素：独占一行
2.行内元素：不独占一行
注：行可以在块里面，反之则不可以。display可以打破。

dispaly 块可以内嵌在行里面

1. block：块元素；
2. inline：行内元素；
3. inline-block：是块元素，但是可以内联，在一行；
   这也是一种实现行内元素排列的方式，但是我们很多情况用float。

	<style>
		div{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
        span{
            width: 100px;
            height: 100px;
            border: 1px solid darkorange;
            display: inline-block;
        }
    </style>


<div>div块元素</div>
<span>span行内元素</span>

五、定位 position

有五个不同的位置值：

• static（默认） ：静态定位的元素不受 top、bottom、left 和 right 属性的影响

• relative ：的元素相对于其正常位置进行定位。

• fixed ：的元素是相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

• absolute ：的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
  然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。

• sticky ：的元素根据用户的滚动位置进行定位。

• z-index ：设置元素的堆叠顺序。