CSS介绍 | 元素

css基本语法及页面引用

原文链接：https://www.cnblogs.com/alwaysInMe/p/7271409.html

css基本语法

css的定义方法是：

选择器 { 属性:值; 属性:值; 属性:值;}

选择器是将样式和页面元素关联起来的名称，属性是希望设置的样式属性每个属性有一个或多个值。代码示例：

div{ width:100px; height:100px; color:red }

css页面引入方法：

1、外联式：通过link标签，链接到外部样式表到页面中。

<link rel="stylesheet" type="text/css" href="css/main.css">

2、嵌入式：通过style标签，在网页上创建嵌入的样式表。

<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>

3、内联式：通过标签的style属性，在标签上直接写样式。

<div style="width:100px; height:100px; color:red ">......</div>

4.导入式：将一个独立的.css文件引入HTML文件中，导入式使用CSS规则引入外部CSS文件，<style>标记也是写在<head>标记中。

<style type="text/css">
          @import"mystyle.css"; 此处要注意.css文件的路径
</style>

css文本设置

常用的应用文本的css样式：

color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:'微软雅黑';
font-style 设置字体是否倾斜，如：font-style:'normal'; 设置不倾斜，font-style:'italic';设置文字倾斜
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性，写的顺序有兼容问题，建议按照如下顺序写： font：是否加粗字号/行高字体；如： font:normal 12px/36px '微软雅黑';
line-height 设置文字的行高，如：line-height:24px;
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中

css颜色表示法

css颜色值主要有三种表示方法：

1、颜色名表示，比如：red 红色，gold 金色

2、rgb表示，比如：rgb(255,0,0)表示红色

3、16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

css选择器

常用的选择器有如下几种：

1、标签选择器

标签选择器，此种选择器影响范围大，建议尽量应用在层级选择器中。
举例：

*{margin:0;padding:0}         <!-- 应用于所有的标签 -->
div{color:red}           <!-- 应用于div标签 -->


<div>....</div>   <!-- 这里是使用，对应以上两条样式 -->
<div class="box">....</div>   <!-- 对应以上两条样式 -->

2、id选择器

通过id名来选择元素，元素的id名称不能重复，所以一个样式设置项只能对应于页面上一个元素，不能复用，id名一般给程序使用，所以不推荐使用id作为选择器。
举例：

#box{color:red}

<div id="box">....</div>   <!-- 对应以上一条样式，其它元素不允许应用此样式 -->

3、类选择器

通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类，应用灵活，可复用，是css中应用最多的一种选择器。
举例：

.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px}

<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>

4、层级选择器

主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突。
举例：

.box span{color:red}
.box .red{color:pink}
.red{color:red}

<div class="box">
    <span>....</span>
    <a href="#" class="red">....</a>
</div>

<h3 class="red">....</h3>

5、组选择器

多个选择器，如果有同样的样式设置，可以使用组选择器。
举例：

E,F   多元素选择器，同时匹配所有E元素或F元素，E和F之间用逗号分隔      :div,p { color:#f00; }

E F   后代元素选择器，匹配所有属于E元素后代的F元素，E和F之间用空格分隔 :li a { font-weight:bold;｝

E > F   子元素选择器，匹配所有E元素的子元素F            :div > p { color:#f00; }

E + F   毗邻元素选择器，匹配所有紧随E元素之后的同级元素F  :div + p { color:#f00; }

E ~ F   普通兄弟选择器（以破折号分隔）                 :.div1 ~ p{font-size: 30px; }


.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold}

<div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>

6、伪类及伪元素选择器：专用于控制链接的显示效果

常用的伪类选择器有hover，表示鼠标悬浮在元素上时的状态，伪元素选择器有before和after,它们可以通过样式在元素中插入内容。

        a:link（没有接触过的链接）,用于定义了链接的常规状态。

        a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

        a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

        a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

        伪类选择器 : 伪类指的是标签的不同状态:

                   a ==> 点过状态 没有点过的状态 鼠标悬浮状态 激活状态

        a:link {color: #FF0000} /* 未访问的链接 */

        a:visited {color: #00FF00} /* 已访问的链接 */

        a:hover {color: #FF00FF} /* 鼠标移动到链接上 */

        a:active {color: #0000FF} /* 选定的链接 */ 格式: 标签:伪类名称{ css代码; }

 1 伪类选择器
 2     link:
 3     hover:
 4         .out:hover .box1{ <!-- 悬浮out 修改 box1,被操作的标签（box
 5 ）一定是悬浮标签（out）的子元素        --> }
 6     visited:
 7     active:
 8
 9     before:
10     after:用于 内联 标签之间增加个换行（块标签）

before after伪类

 :before    p:before       在每个<p>元素之前插入内容
 :after     p:after        在每个<p>元素之后插入内容

例：p:before{content:"hello";color:red;display: block;}

属性选择器

 1     <style>
 2         div[egon]{    <!-- 标签是 div 属性是 egon的 -->
 3             color:red;
 4         }
 5
 6         [egon]{    <!-- *属性是 egon的 -->
 7             color:red;
 8         }
 9
10         div[egon="123"]{  <!-- *精确定位 -->
11             color:red;
12         }
13
14         div[egon^="123"]{  <!-- 123开头的 -->
15             color:red;
16         }
17
18         div[egon$="123"]{  <!-- 123结尾的 -->
19             color:red;
20         }
21
22         div[egon*="123"]{  <!-- 包含123 -->
23             color:red;
24         }
25
26         div[egon~="123"]{  <!-- 多条属性的时候，选择其中一条属性 -->
27             color:red;
28         }
29     </style>

选择器的优先级：

1     color:red!important;(最高)        内嵌:1000     id:100      class:10        element(标签):1
2     .c1 .c2 .c3{ <!-- 级别是30 -->}
3     .c1 p{ <!-- 级别是11 --> }

选择器的继承：

盒子套盒子，外面盒子的属性会被里面的盒子继承

属性：

    color;
    background-color;
    fount-size;
    border;

    text-decoration:none    下划线吧。。。

    字体：
        color:RBGA(前三个是颜色，A是透明度)
        text-align; left center right justify(两端对齐)

        vertical-align;baseline - top - middle - (-)10px

    background-color;
    background-image;
        background-repeat; repeat-x - repeat-y - no-repeat(填充规则)
        background-position:100px 200px;  左-100， 上-200
                            center center
            (修改图片位置)
        background:url("图片地址") no-repeat center center;


    border:1px 线形 red;
        border-style:线型
        border-color:颜色
        border-width:宽度


    list
        list-style:none(加元素)


    margine


    width;
    height;

    border-radius:20 (圆润度)

　　placeholder:text框中的默认值
　　cursor:设置鼠标指针形状-例子中是用在 botton 中的
　　　　pointer

　　outline:搜索框外面的线（选中的时候才有）

CSS3新增选择器

1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素

<style type="text/css">
    .list div:nth-child(2){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第2个子元素div匹配 -->

2、E:nth-last-child(n)：匹配元素类型为E且是父元素的倒数第n个子元素（与上一项顺序相反）
3、E:first-child：匹配元素类型为E且是父元素的第一个子元素
4、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
5、E:only-child：匹配元素类型为E且是父元素中唯一的子元素
6、E:nth-of-type(n)：匹配父元素的第n个类型为E的子元素
7、E:nth-last-of-type(n)：匹配父元素的倒数第n个类型为E的子元素（与上一项顺序相反）
8、E:first-of-type：匹配父元素的第一个类型为E的子元素
9、E:last-of-type：匹配父元素的最后一个类型为E的子元素
10、E:only-of-type：匹配父元素中唯一子元素是E的子元素
11、E:empty 选择一个空的元素
12、E:enabled 可用的表单控件
13、E:disabled 失效的表单控件
14、E:checked 选中的checkbox
15、E:not(s) 不包含某元素

<style type="text/css">
    .list div:not(:nth-child(2)){
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>

<!-- 第 3、4、5 子元素div匹配 -->

其他说明

li:nth-child(2){   修改第2个li
}
li:nth-child(2n){  修改偶数
}
li:nth-child(2n+1){ 修改奇数的
}


.box div:nth-child(3){   找到第三个子元素，如果是div就运行

}

.box div:nth-of-type(3){  找到子元素中的第三个div元素
}

CSS3圆角、阴影、rgba

CSS3圆角

设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;

同时分别设置四个角： border-radius:30px 60px 120px 150px;

设置四个圆角相同：
border-radius:50%;

CSS3阴影

box-shadow：h-shadow v-shadow blur spread color inset;
分别设置阴影：水平偏移垂直偏移羽化大小扩展大小颜色是否内阴影

<style type="text/css">
    .box{
        width:200px;
        height:50px;
        background-color:gold;
        /* box-shadow:10px 10px 5px 2px pink inset; */
        box-shadow:10px 10px 5px 2px pink;
    }
</style>
......
<div class="box"></div>

<!-- 给盒子加上了粉红色的阴影 -->

rgba（新的颜色值表示法）

1、盒子透明度表示法：opacity:0.1;filter:alpha(opacity=10)（兼容IE）;
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度