CSS

css，也就是层叠(级联)式样式表，用来美化html网页的，使得页面更加生动。

CSS三种引用样式

元素内嵌样式：

<标签元素 style="样式一；样式二；...；">这是文本</标签元素>

如：<p style="color:red; font-size:50px;">这是文本</p> 

文档内嵌样式：

<style>样式表</style> 

如：使标签中的字体变红色并且字体大小变为50px

<head>
<style type="text/css">

p{

color:red;

font-size:50px;

}</style>
</head>

<body>

<p>这是文本</p>

</body>

外部引用样式：



<link rel="styleshcet" type="text/css" href="css文件名.css">

如：有一个color的css文件内容如下

p{

color:red;

font-size:50px;

}

那么引用<link rel="styleshcet" type="text/css" href="color.css">，会使所有p标签的字体变红色并且字体大小变为50px

选择器

类选择器：在标签中写上class="随便起一个名字"，然后用“.名字”调用

如：使标签中的字体变红色并且字体大小变为50px

<head>
<style type="text/css">

.c{

color:red;

font-size:50px;

}

</style>
</head>

<body>

<p class="c">这是文本</p>

</body>

id选择器：在标签中写上id="随便起一个名字"，然后在<style>标签之间用“#名字”调用

如：使标签中的字体变红色并且字体大小变为50px

<head>
<style type="text/css">

#c{

color:red;

font-size:50px;

}

</style>
</head>

<body>

<p id="c">这是文本</p>

</body>

父子选择器：格式：父标签子标签，如果太多相同的标签，但是你只是想要改变的是某个容器中的魔偶个标签样式，就使用父子选择器

如：改变div标签里的p标签样式，如下只会使div的p改变字体颜色，div而外面p不会改变字体颜色

<head>
<style type="text/css">

div>p {color:red;}

</style>
</head>

<body>

<div>

<p id="c">这是文本</p>

<div>

<p id="c">这是文本</p>

</body>

祖先后代选择器：格式：祖先标签后代标签，如果嵌套很多层标签，你只想要最里层的标签改变样式，就用这个选择器

如：以下三层嵌套想要最里面的ol里的字体全部变为红色
       <head>
             <style>
                ol ol{color: red}
             </style>
       </head>
      <body>
         <ol>
           <li>a</li>
           <li>b</li>
           <ul>
             <li>c</li>
             <li>d</li>
             <ol>
               <li>e</li>
               <li>f</li>
             </ol>
           </ul>
         </ol>
      </body>
伪类选择器：

:hover 移入
:first 匹配选中的第一个
:last 匹配选中的最后一个
:focus 获取焦点时

如：p:hover{color:red;font-size:50px;};

优先级:

如果不同的选择器匹配到了同一个元素， style属性定义的样式最高，id选择器优先级次之，类选择器次之，元素选择器最低
同级选择器，后定义的优先
可以用 !important 改变优先级，可以把优先级提升到最高

颜色相关的样式

前景色

color: 单词
rgb(红色, 绿色, 蓝色) 范围从 0~255
16进制值格式 `#红绿蓝` 范围从 0~FF 如：#ff0000 表示红色
rgba(红色, 绿色, 蓝色, 0.0~1.0)
特殊取值：白色 rgb(255,255,255)、黑色 rgb(0,0,0)

背景色

background-color:颜色

背景图相关配置

背景图

background-image:url(图片地址)

设置背景图如何展示

background-repeat: no-repeat(不重复图片，也就是只显示要设置的背景图，只显示一次)

background-repeat:repeat-x (横向重复背景图片)

background-repeat:repeat-y (纵向重复背景图片)

盒子模型（设置距离）

margin 外间距（设置容器间的距离）

margin-left 左
margin-right 右
margin-top 上
margin-bottom 下

border 边框

border-left 边框宽度边框线类型边框颜色
...

padding 内间距（设置容器内部组件的距离）

padding-left 左
padding-right 右
padding-top 上
padding-bottom 下

定位方式

position: absolute; /*绝对定位*/
坐标的原点在左上角
left: x 轴的坐标
top: y 轴的坐标
z-index z 轴坐标取值越大，越靠上

字体相关设置

字体大小

font-size : 数字px

字体种类（电脑上事先需要有这个字体）

font-family: 字体名称

字体样式

font-style:italic; 
font-weight: bold; 
text-decoration: line-through; 
text-decoration: underline;

显示和隐藏

隐藏

display: none;

显示

display: block;

代码演示

<!DOCTYPE html>
<html lang="en"><!--语言为英文，zh为中文-->
<head>
    <meta charset="UTF-8"><!--编码为utf-8-->
    <title>Document</title><!--网页标题-->
    <style>
        /* 找到一个p标签，并且它的父标签必须是div */
        div>p {color:red;}/**字体变为红色，父子选择器*/
        #sx li {color: red;}/**字体变为红色，祖先后代选择器*/
        #btn1 {display: none}/**隐藏按钮，id选择器*/
        tr:hover {background-color: blue;color:white;}/**鼠标滑到表格上背景变为蓝色，并且字变为白色，伪类选择器*/
    </style>
</head>
<body>
    <input type="text">
    <div>
        <p>p1</p>
    </div>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <table border="1" width="100%">
        <tr>
            <td>a</td>
        </tr>
        <tr>
            <td>b</td>
        </tr>
        <tr>
            <td>c</td>
        </tr>
    </table>
    <input id="btn1" type="button" value="按钮">
    <div>
        <section>
            <p>段落1</p>
        </section>
        <p>段落2</p>
    </div>
    <ul>
        <li id="sx">陕西省
            <ul>
                <li>西安市
                    <ul>
                        <li style="text-decoration: line-through">长安区</li><!--贯穿线-->
                        <li style="text-decoration: underline">高新区</li><!--下划线-->
                        <li>碑林区</li>
                    </ul>
                </li>
                <li>宝鸡市</li>
                <li>渭南市</li>
            </ul>
        </li>
        <li id="hb">河北省
            <ul>
                <li>石家庄</li>
            </ul>
        </li>
    </ul>
</body>
</html>

注意：加注释时，head和body都可以用，<style>之间用/**注释*/或/*注释*/。

总结

css的各种样式很多，但是怎么用都是差不多的，只要记住常用的，忘记的或不会的，下次查查css的文档就可以了，附上离线文档（https://pan.baidu.com/s/1kLbRuQiTVXKtQlpVuhwiBw），可以查css、html和javascript。

CSS 颜色、字体、距离、选择器、显示和隐藏的设置

CSS