CSS概述

Cascading Style Sheets 叠层样式表
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS的样式

行内样式

<div style="width:200px;height:300px;border:1px solid "></div>

内嵌样式

写在head里

<head>
    <style type="text/css">    定义css样式

    </style>
</head>

示例

<head>
    <style type="text/css">  
        /*1.class类名选择器*/  
             .block {
            width: 500px;
            height: 500px;
            background: deeppink;
            }

        /*2.id选择器*/
        #di {
            width: 100px;
            height: 100px;
            background: orange;
        }
        /*3.属性选择器*/
        div[class="b"][id="bb"]{
            width: 300px;
            height: 500px;
            background: black;}
       /*4.子父元素选择器*/
        #ulmenu{
            border: 1px solid silver;
            list-style: none;

        }
        #ulmenu li{
            color: red;
        }
    </style>
</head>
<body>
        <div class="block"></div>
        <div id="di"></div>
        <div class="b" id="bb"></div>
        <ul id="ulmenu" >
            <li>1
                <ul>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                    <li>2</li>
                </ul>
           </li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
</ul>

外部样式

写在head里

<head>

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

</head>

示例：

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

<body>
        <div id="b_3"></div>
        <div id="centerBlock" style="width:800px"></div>
</body>

/*index.css 文件内的代码：*/

#b_3{
    width: 200px;
    height: 200px;
    border: 1px solid red;

}
#centerBlock{
    border: 1px solid green;
    height: 400px;
}

三种写法的特点

行内样式：作用范围仅限于当前标签，范围小，结构表现混在一起。
内嵌样式：样式只作用于当前文件，没有真正实现结构分离。
外部样式：作用范围是当前站点，谁调用谁生效，范围广，真正实现结构样式相分离。

选择器

基本写法

选择器：{

        属性：值；

        属性：值

}

标签选择器

写法：标签{属性：值；}

div{
       width: 100px;
       height: 300px;
       border: 1px solid black;
   }

特点：标签选择器定义以后，会将页面所有的元素都执行这个标签样式。

class选择器

写法：自定义类名{属性：值；}

 .block {
            width: 500px;
            height: 500px;
            background: deeppink;
        }

特点：

谁调用，谁生效
一个标签可以有多个类选择器
多个标签可以调用同一个类选择器

类选择器命名规则：

不能用纯数字或者数字开头来定义命名
不能使用特殊符号（_除外）来定义命名
不推荐使用汉字来命名
不推荐使用标签名，属性，属性值来定义类名

id选择器

写法：#自定义名{属性：值；}

#di {
         width: 100px;
         height: 100px;
         background: orange;
        }

特点：

谁调用，谁生效
一个标签只能调用一个id选择器
一个id选择器在一个页面智能调用一次

属性选择器

 div[class="b"][id="bb"]{
            width: 300px;
            height: 500px;
            background: black;
}

字父元素选择器

 #ulmenu{
            border: 1px solid silver;
            list-style: none;
          
        }
 #ulmenu li{
            
            color: red;
        }

伪类选择器

伪类选择器不像id选择器、class选择器会立即生效，它是根据一些事件触发才会生效控制

常用伪类的状态有：

:link        选择未访问的链接
：visited    选择已访问的链接
：hover      选择鼠标指针浮动在其上的元素
：active     选择活动的链接
：focus      选择获取焦点的输入字段

示例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        a:link{
            /*未访问时是黑色*/
            color: black
        }
        a:visited{
            /*浏览过后是红色*/
            color: red;
        }
        a:hover{
            /*鼠标移入是绿色*/
            color: green;
        }
    </style>

</head>
<body>
        <a href="#">超链接1</a>
        <a href="#">超链接2</a>

</body>
</html>

权重和优先级

优先级：! important>行间样式>id>class>标签选择器>通配符

优先级一样，后面覆盖前面 class和属性一级

css权重（可叠加，256进制，不是十进制）

！important           infinity       正无穷

行间样式               1000

Id                     100

Class|属性|伪类          10

标签选择器|伪元素         1

通配符                   0

相对定位

通常情况下，元素的position属性的值默认static，也就是说没有定位。无法给元素设置top，bottom，left，right，Z-index属性。

格式 position：relative；
设置相对定位以后，元素相对于它在文档流中位置的起始点进行移动
元素可以设置left等属性，在偏移以后，仍占据着未偏移前的空间
该元素的偏移不会影响其他元素的位置，如果有重叠的部分，它会重叠在其他元素之上（浮起来），而不是挤开。可以用Z-index属性设置堆叠顺序。

绝对定位

格式 position：absolute；
元素可设置left等属性，在偏移后不占据原来的空间
绝对定位的元素需要一个参照物，参照父元素（逐渐向上），若无父元素没有定位，则会相对于文档body来定位。

盒子模型

width和height指内容区域的宽度和高度

元素实际宽度=左右外边距+左右边框+左右内边框+width；

元素实际高度=上下外边距+上下边框+上下内边距+height；

margin外边距

1.围绕在元素边框周围的空白区域

2.语法：margin：value；

属性：

margin：value     四个方向的外边距

margin-left：     左外边距

margin-right：    右外边距

margin-top：      上外边距

margin-bottom：   下外边距

取值：1）具体数值（px）

2）% 百分比

3）值为auto，由浏览器自动计算左右外边距，上下无效

允许让块级元素，呈现出水平居中的表现效果，前提：块级元素必须设置宽度

3.举例

margin：0；                取消默认外边距

margin：10px 20px ；       上下各10像素外边距，左右各20像素外边距

margin：5px 10px 15px；    上外边距：5像素，左右外边距：10，下外边距：15

margin：1px 2px 3px 4px ； 上 1，右 2，下 3，左4

padding内边距

1.内容区域与边框之间的区域

2.语法：

属性：

padding：value            四个方向的内边距

padding-left：1px；       左内边距

padding-right：2px；      右外边距

padding-top：3px；        上内边距

padding-bottom：4px；     下内边距

取值：数值，%

用法与margin相似

border边框

定义四条边框的格式：宽度，样式，颜色
border: width style color;

width:宽度
style:边框线条样式：solid ：实线 dotted ：虚线 dashed ：虚线
color:颜色，还可以取值为透明 transparent

CSS基础-CSS样式选择器