CSS小白入门笔记

一、CSS简介

1. 什么是CSS

CSS：Cascading Style Sheet 层叠样式表

是一组样式设置规则，用于控制页面的外观样式

2. CSS作用

页面外观美化
布局和定位

二、基本用法

1.CSS语法

<head>
	<style type="text/css">
		选择器{
			属性名:属性值; 
            属性名:属性值;
			}
	</style>
</head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪个属性（样式）
属性值：属性的取值

2. CSS应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面所有符合样式选择器的标签都起作用

2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

2.3 外部样式

使用单独的 css 文件定义，然后在页面头部中使用link标签引入外部样式表

<link rel="stylesheet" href="css样式文件的路径" type="text/css">

所有引入样式表文件的页面都起作用

步骤：

新建一个css目录，目录下建一个.css文件
在html文件的头部使用link标签引入外部样式表

.css文件:

span{
    color:green;
    text-decoration: underline;
}

.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        p{
            color:red;
            font-size:50px;
        }
    </style>
    <!--引用外部样式文件-->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <p>welcome</p>
    <!--行内样式-->
    <div style="color: blue; font-weight: bold;">to</div>
    <p>css</p>
    <span>哈哈</span>
</body>
</html>

3. CSS注释

CSS的注释形式：/**内容**/

注意：千万不要在style标签中写html的注释，如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*正确注释*/
    	<!--错误注释-->
        p{
            color:red;
            font-size:50px;
        }
    </style>
</body>
</html>

三、选择器

1. 基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器名称

以标签名作为样式应用依据

1.2 类选择器

使用自定义名称，以. 作为前缀，然后通过HTML标签的class属性调用类选择器

以标签的class属性值作为样式应用依据

注意：

调用时不能添加. 号
同时调用多个类选择器时以空格隔开
类选择器名称不能以数字开头

1.3 ID选择器

使用自定义名称，以# 作为前缀，然后通过HTML标签的id属性进行名称自动匹配

以标签的id属性值作为样式应用依据，一对一的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器*/
        p{
            color: red;
        }
        /*类选择器*/
        .hello{
            color: blue;
        }
        .world{
            text-decoration: line-through;
        }
        /*ID选择器*/
        #aaa{
            background: #ccc;
        }
    </style>
</head>
<body>
    <!--引用ID选择器-->
    <p id="aaa">嘿嘿</p>
    <div>哈哈</div>
    <span>嘻嘻</span>
    <p>吼吼</p>
    <div class="hello">YY</div>
    <!--同时调用多个类选择器-->
    <ul>
        <li class="hello world">Java开发</li>
    </ul>
</body>
</html>

2. 复杂选择器

2.1 复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

2.2 组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号,隔开

2.3 嵌套选择器

在某个选择器内再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

注：使用空格时不区分父子还是后代，使用>时必须是父子关系才行

2.4 伪类选择器

根据不同的状态显示不同的样式，一般多用于a标签，即超链接

四种状态：

:link 未访问的链接

:visited 已访问的链接

:hover 鼠标移动到链接上，即悬浮在链接上

:active 选定的链接，被激活

要注意四种状态的书写顺序： link——> visited——>hover——>active

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*复合选择器:标签选择器和类选择器*/
        p.hello{
            color: red;
        }
        /*复合选择器:标签选择器和ID选择器*/
        div#world{
            color: blue;
        }
        /*组合选择器，也称为集体声明*/
        .hello{
            text-decoration: underline;
        }
        .world{
            text-decoration: line-through;
        }
        div.abc{
            text-decoration: overline;
        }
        .hello,.world,div.abc{
            font-size: 20px;
            font-weight: bold;
            background: #cccccc;
        }
        /*嵌套选择器*/
        div span{
            font-style: italic;
        }
        /*伪类选择器*/
        /*只能按照这种顺序书写，不能随便换顺序*/
        a:link{
            font-size: 12px;
            color: red;
            text-decoration: none;
        }
        a:visited{
            font-size: 20px;
            color: yellow;
            text-decoration: none;
        }
        a:hover{
            font-size: 30px;
            color: blue;
            text-decoration: none;
        }
        a:active{
            font-size: 40px;
            color: green;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <p class="hello">welcome</p>
    <div id="world" class="abc">to</div>
    <span class="hello">css</span>
    <p>hello</p>
    <div>
        <span>嘿嘿</span>
    </div>
    <!--如果上面嵌套选择器写的是div>span,那只有父子关系可以应用，下面这种不能应用-->
    <div>
        <p>
            <span>嘻嘻</span>
        </p>
    </div>
    <a href="test02.html">打开test02页面</a>
</body>
</html>

3. 选择器优先级

3.1 优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器

原因：首先加载标签选择器，再加载类选择器，然后加载ID选择器，最后加载行内样式

后加载的会覆盖先加载的同名样式

注：当样式不冲突时会全部加载，样式冲突时按选择器的优先级加载

3.2 内外部样式加载顺序

就近原则

	原因：按照书写顺序依次加载，在同优先级的前提下，后加载的会覆盖先加载的同名样式，所以离的越近越优先

3.3 !important

可以使用!important使某个样式属性具有最高的优先级

<style>
    p{
        color: red;
        text-decoration: underline!important;
    }
</style>

四、常用CSS属性

1. 字体属性

定义字体相关的样式

属性	含义	说明
font-size	大小、尺寸	所有CSS属性的默认值都为inherit（继承父容器的大小）
font-weight	粗细	取值：normal、bold（粗体）
font-family	字体	取值：黑体、楷体等
font-style	样式	取值：normal、italic（斜体）

2. 文本属性

属性	含义	解释
color	颜色	使用英文单词、16进制的RGB值，特定情况下可以缩写，如#FFFFFF > #FFF
line-height	行高	行内容的高度，也可以简单的理解为行之间的距离
text-align	水平对齐方式	取值：left、center、right
vertica-lalign	垂直对齐方式	取值：top、middle、bottom，可用于图片和文字的对齐方式
textdecoration	文本修饰	取值：underline、overline、linethrough、none

3. 背景属性

属性	含义	解释
background-color	背景颜色
background-image	背景图片	必须使用`url(路径)`
background-repeat	背景图片的重复方式	取值：repeat(默认)、repeat-x、repeat-y、no-repeat
backgroundposition	背景图片的显示位置	取值：关键字（top、bottom、left、right、center）、坐标
background	简写	一般顺序：颜色图片重复方式显示位置

<style>
    p{
        background-color: #ccc;
        background-image: url(image/qq.jpg);
        background-repeat: no-repeat;
        background-position: center center;
        background-position: 150px 50px;
        background: #ccc url(image/qq.jpg) no-repeat 150px 50px;
    }
</style>

4. 列表属性

使用liststyle属性设置列表项前的标记

5. 浮动属性

通过float属性实现元素的浮动，取值：

left 左浮动
right 右浮动
none 不浮动，默认值

6. 元素的显示和隐藏

通过display属性设置元素是否显示，以及是否独占一行

常用取值：

none 不显示
inline 将块级元素变为行级元素，不再独占一行
block 将行级元素变为块级元素，独占一行
inline-block 在inline的基础上允许设置宽和高

注：行级元素默认无法设置宽和高，可以为行级元素设置display:inline-block，然后就可以设置宽和高

五、盒子模型

1. 概念

盒子模型是网页布局的基础，将页面中所有的元素都看作成一个盒子，盒子都包含以下几个属性：

width 宽度
height 高度
border 边框
padding 内边距
margin 外边距

在这里插入图片描述

2. 盒子属性

2.1 border

表示盒子的边框

 分为四个方向：上top、右right、下bottom、左left

 每个边都包含三种样式：颜色color、粗细width、样式style

  border-style的取值：solid实线、dashed虚线、dotted点状线、double双线等

  简写，三种方式：

按方向简写

border-top、border-right、border-bottom、border-left

书写顺序，border-方向 : width style color
按样式简写

border-color、border-width、border-style、border-radius圆角

书写顺序，border-样式 : top right bottom left

必须按顺时针方向书写，即：上、右、下、左的顺序，同时可以缩写

border-width : 2px ——> 四个边的宽度都为2px

border-width : 2px 4px

border-width : 2px 3px 4px

注：如果省略，则认为上下一样、左右一样
终极简写

如果四个边都一样，border : width style color

2.2 padding

表示盒子的内边距，即内容与边框之间的距离

同样也分为四个方向，也可以简写（按顺时针方向、默认上下一样，左右一样）

2.3 margin

表示盒子的外边距，即盒子与盒子之间的距离