CSS学习笔记

作者: 绿杨烟外晓寒轻_ | 来源:发表于2019-11-21 22:05 被阅读0次

一、简介

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

总之：

样式表定义如何显示 HTML 元素，就像 HTML 中的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。我们只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观。
先来看一个CSS的例子，这个样式表放在了html中，又叫内部样式表。正常来说CSS应该放在一个后缀css的文件中，链接到HTML文件中（外部样式表）。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
body
{
    background-color:#d0e4fe;
}
h1
{
    color:orange;
    text-align:center;
}
p
{
    font-family:"Times New Roman";
    font-size:20px;
}
</style>
</head>

<body>

<h1>CSS 实例!</h1>
<p>这是一个段落。</p>

</body>
</html>

二、CSS语法

1.CSS 规则

CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:

CSS规则

2.CSS注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。
CSS注释以 /* 开始, 以 */ 结束.。

3.id 和 class 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
以下的样式规则应用于元素属性 id="para1":

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
#para1
{
    text-align:center;
    color:red;
} 
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>这个段落不受该样式的影响。</p>
</body>
</html>

注：ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。

class 选择器

class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。
class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">标题居中</h1>
<p class="center">段落居中。</p> 
</body>
</html>

你也可以指定特定的HTML元素使用class。

在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
p.center
{
    text-align:center;
}
</style>
</head>

<body>
<h1 class="center">这个标题不受影响</h1>
<p class="center">这个段落居中对齐。</p> 
</body>
</html>

4.CSS的使用

如何插入样式表

插入样式表的方法有三种:

外部样式表(External style sheet)
内部样式表(Internal style sheet)
内联样式(Inline style)

外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部：

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

浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。

注：不要在属性值与单位之间留有空格

内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式

由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距：

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

多重样式

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。

优先级为内联样式>内部样式表>外部样式表>浏览器默认样式。

现有一个HTML文件，同时有这三种样式表，当属性内容冲突时以优先级高的为准，当该属性内容只有一个样式表定义时，则同样继承样式。

<head>
    <!-- 外部样式 style.css -->
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <!-- 设置：h3{color:blue;} -->
    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>测试！</h3>
</body>

注：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。

三、属性介绍

CSS 参考手册

一、CSS初识

1、为什么需要CSS

问题一：

HTML的作用是负责数据的格式化的展示。
如果使用HTML来进行数据的样式，则发现样式书写起来太过于麻烦，不易于维护。
不能够重复使用代码。

问题二：

HTML可以有效的组织数据的展示，但是不同类型数据在浏览器中的分部没有办法实现。

为了解决上面的问题：

诞生了CSS语言，专门用来给网页进行样式开发

2、什么是CSS

1）css的概念：

层叠样式表
- 作用：
  - 1.给网页进行样式的开发
  - 2.给网页进行布局
- 特点：
  - 语言特别简单
  - 开发的样式可以重复使用
  - 依赖于HTML

3、使用CSS

CSS的声明
CSS的选择器
CSS的常用样式
CSS的盒子模型
CSS的定位
CSS的布局

二、CSS的声明

css声明学习：

1、在head标签中使用style标签声明：
作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式
2、在标签上使用style属性进行声明
作用：此声明会将css样式直接作用域当前标签
3、在head标签中使用link标签引入外部声明好的css文件
作用：此声明相当于调用,解决了不同网页间样式重复使用的问题
一次声明，随处使用

问题：

不同的声明给同一个标签操作了同一个样式，会使用谁的？
如果css的声明全部在head标签中，则遵循就近原则，谁离标签近，则显示谁。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的声明学习</title>
        <!--声明css代码域-->
        <link rel="stylesheet" type="text/css" href="css/mycss.css"/>
        <style type="text/css">
            hr{
                width: 50%;
                height: 20px;
                color: red;
                background-color: red;
            }
            
        </style>
    </head>
    <body>
        <h3>css的声明学习</h3>
        <hr style="background-color: blue;"/>
        <hr />
        
    </body>
    
</html>

三、CSS的选择器

css的选择器学习：

1.标签选择器：

标签名｛样式名1：样式值；...｝
    作用：给当前网页内的所有该标签添加样式

2.id选择器：

#标签的id属性值｛样式名1：样式值；...｝
    作用：给某个指定的标签添加指定的样式

3.类选择器：

.类选择器名｛样式名1：样式值；...｝
    作用：给不同的标签添加相同的样式

4.全部选择选择器

*｛样式名1：样式值；...｝
    作用：选择所有的HTML标签，并添加相同的样式

5.组合选择器：

选择器1，选择器2，...｛
            样式名1：样式值；...
                ｝
    作用：解决不同的选择器之间重复样式的问题

6.子标签选择器：

选择器1 子标签选择器

7.属性选择器：

标签名【属性名=属性值】｛样式名1：样式值；...｝
    作用：选择某标签指定具备某属性并且属性为某属性值的标签

css的使用过程：

1、声明css代码域

2、使用选择器选择要添加样式的标签

                使用*选择器给整个页面添加基础样式
                再使用类选择器给不同的标签添加基础样式
                再使用标签选择器给某类标签添加基础样式
                再使用id、属性选择器、style属性声明方式给某个标签添加个性化样式

3、书写样式单

1)边框设置

                    border:solid 1px;

2)字体设置

                    font-size:10px;
                    font-family:"黑体"; 设置字体
                    font-weight:bold;设置字体加粗

3)字体颜色设置

                    color:颜色;

4)背景颜色设置

                    background-color:颜色;

5)背景图片设置

                    background-img:url(图片地址);
                    background-repeat:no-repeat;（设置图片不重复）
                    background-size:cover;图片平铺整个页面

6)高和宽设置

7)浮动设置

                    float:left|right;

8)行高设置（lineheight）

                    line-height:10;（行间距）

四、css的样式使用

例1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css的样式使用</title>
        <!--声明css的代码域-->
        <style type="text/css">
            /*添加网页背景图*/
            body{
                background-image: url(img/1.JPG);
                background-size: cover;
                background-repeat: no-repeat;
            }
            /*标签选择器*/
            table{
                border:solid 1px;
                /*border-radius:10px ;*/
    
            }
            /*table行高设置*/
            tr{
                height: 40px;
                
            }
            /*设置宽度*/
            td{
                /*宽*/
                width: 100px;    
                /*添加边框和边框大小、颜色*/
                border:solid 1px red;
                /*border-bottom: none;  
                border-left: none;  */
                /*设置边框的边角度*/
                border-radius:10px ;
                /*设置背景颜色*/
                /*background-color:transparent;*/
                background-color:orange;
                /*设置文本位置*/
                text-align: center;
                /*设置文本颜色*/
                color: blueviolet;
                /*文本加粗*/
                font-weight: bold;
                /*字体间距*/
                letter-spacing: 10px;
            }
/*-----------------------------------------*/
            ul{
                height: 50px;
                background-color:gray ;
            }
            li{
                list-style-type:none;
                /*display: inherit;*/
                /*设置左悬浮*/
                float: left;
            }
            li a{
                color: black;
                text-decoration: none;
                font-weight:bold ;
                font-size: 20px;
                margin-left: 20px;
                /*垂直居中*/
                position: relative;
                top: 10px;
            }
        </style>
    </head>
    <body>
        <h3>css的样式使用</h3>
        <hr />
        <table>
            <tr>
                <td>姓名</td>
                <td>性别</td>
                <td>爱好</td>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>唱歌</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>男</td>
                <td>跳舞</td>
            </tr>
        </table>
        <hr />
        <ul>
            <li><a href="">首页</a></li>
            <li><a href="">百战</a></li>
            <li><a href="">java</a></li>
            <li><a href="">客服</a></li>
        </ul>
    </body>
</html>

照片墙实例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>照片墙</title>
        <style type="text/css">
            /*设置图片样式*/
            img{
                width: 12%;
                border: solid red;
                /*设置内边距*/
                padding: 10px;
                background-color: white;
                /*设置倾斜角度*/
                transform: rotate(-10deg);
                /*设置外边距*/
                margin: 20px ;
            }
            /*使用伪类给标签添加样式*/
            img:hover{
                /*设置旋转角度和缩放比例*/
                transform: rotate(0) scale(1.5);
                /*设置显示优先级别*/
                z-index: 1;
                /*设置显示加载时间*/
                transition: 1.5s;
                
            }
            body{
                text-align: center;
                background-color: gray;
            }
        </style>
    </head>
    <body>
        <br /><br /><br /><br />
        <img src="img/1.JPG" alt="1" />
        <img src="img/2.jpg" alt="2" />
        <img src="img/3.jpg" alt="3" />
        <img src="img/4.jpg" alt="4" /><br />
        <img src="img/5.jpg" alt="5" />
        <img src="img/6.jpg" alt="6" />
        <img src="img/7.jpg" alt="7" />
        <img src="img/8.jpg" alt="8" />
    </body>
</html>

五、css的盒子模型

div标签：

块级标签，主要是用来进行网页布局，会将其中的子元素内容作为一个独立的整体存在
特点：
    默认宽度是页面的宽度，但是可以设置
    默认高度无，但是可以设置（可以顶开）
    如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。

盒子模型

1.外边距：margin

作用：用来设置元素和元素之间的间隔
居中设置 margin:0px auto; 上下间隔是0px，水平居中
可以根据需求单独设置上下左右的外边距

2.边框：border

作用：用来设置元素的边框大小
可以单独设置上下左右

3.内边距：padding

作用：设置内容和边框之间的距离
注意：内边距不会改变内容区域的大小
也可以单独设置上下左右的内边距

4.内容区域：

作用：改变内容区域的大小
设置宽和高即可改变内容区域的大小

例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        <style type="text/css">
            img{
                width: 49%;
            }
            #showdiv{
                border: solid 100px;
                width: 40%;
                height: 400px;
                margin-bottom: 10px;
                margin:0px auto;
                padding: 20px ;
                
            }
                
            #div01{
                border: dashed 3px orange;
                width: 40%;
                height: 200px;
                margin-left: 100px;
            }
            
        </style>
    </head>
    <body><br />
        <h3>盒子模型</h3>
        <hr /><br />
        <div id="showdiv">
        <img src="img/7.jpg" alt="" />
        <img src="img/7.jpg" alt="" />
        <!--<img src="img/12.jpg" alt="" />-->
        </div>
        <div id="div01">
            
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型简单布局</title>
        <style type="text/css">
            /*设置div的基础样式*/
            div{
                width: 300px;
                height: 300px;
                margin-right: 20px;
                
            }
            /*设置header和footer的样式*/
            #header,#footer{
                width: 650px;
                margin: auto;
                margin-top:20px ;
                
            }
            /*设置子div的样式*/
            #div01{
                border: solid 1px orange;
                float: left;
            }
            #div02{
                border: solid 1px blueviolet;
                float: left;
            }
            #div03{
                border: solid 1px #4791FF;
                float: left;
            }
            #div04{
                border: solid 1px coral;
                float: left;
            }
        </style>
    </head>
    <body>
        <div id="header">
            <div id="div01">
                我是div01
            </div>
            <div id="div02">
                我是div02
            </div>
        </div>
        
        <div id="footer">
            <div id="div03">
                我是div03
            </div>
            <div id="div04">
                我是div04
            </div>
        </div>
    </body>
</html>

六、css盒子模型的定位

position:

1.相对定位:relative

作用：相对元素原有位置移动指定的距离
可以使用top，left，right，bottom来进行设置
注意：
其他元素的位置不改变

2.绝对定位:absolutw

作用：可以使元素参照界面或者父元素进行移动
注意：
如果父级元素要成为参照元素，必须使用相对定位属性
默认情况下是以界面为基准进行移动

3.固定定位:fixed

作用：将元素固定在现在页面的指定位置，不会随着滚动条的移动而改变位置；

以上定位都可以使用top，left，right，bottom来进行设置

z-index:

此属性是用来声明元素在z轴的层级，层级高的显示在前。
注意：需要先使用position:relative