• cascading style sheet 层叠级联样式表
  • CSS：表现层（美化网页）
  • 字体，颜色，边距，高宽，背景图片，网页定位，网页浮动。。。

第一段css：该段选择h1标签，将颜色指定为红色

h1{
    color: red;
}

CSS的导入方式

  • 行内样式
  • 内部样式
  • 外部样式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导入方式</title>
<!--    外部样式,链接式 链接css文件-->
    <link rel="stylesheet" href="css/style.css">
<!--    外部样式 导入式，不推荐使用-->
    <style>@import "css/style.css";</style>
<!--    内部样式-->
    <style>
/*style标签内只能是css代码，注释样式为“/* * /”*/
        h1{
            color: green;
        }
    </style>
</head>
<body>
<!--行内样式，在标签元素中，添加style属性，参数中直接写声明句-->
<h1 style="color: red">h1</h1>
</body>
</html>
  • 注：在多个样式同时对一个元素进行样式设置时，遵循“就近原则”

选择器

  • 作用：选择页面上的某一个或者某一类元素
  1. 基本选择器
  • 标签选择器：选择页面中所有该标签元素：标签名{}
  • 类选择器：选择页面中所有该类元素：.类名{}
  • id选择器：选择页面中id对应的元素：#id{}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择器</title>
    <style>
        /*标签选择器:会选择页面上该标签的所以元素*/
        h1 {
            color: green;
        }
        /*类选择器的格式：.class的名字{}*/
        .a{
        color: red;
        }
    /*    id选择器：#ID名称{} 注意：全局id必须唯一*/
        #h{
            font-size: 100px;
        }
    </style>
</head>
<body>
<h1 class="a">标题1</h1>
<h1>标题2</h1>
<p class="a">内容1</p>
<p id="h">内容2</p>
</body>
</html>
  • 注意：在这三个选择器之间，存在明确的优先级，不遵循所谓就近原则，优先级：id选择器＞类选择器＞标签选择器。
  1. 层次选择器
  • 后代选择器: 1 2{}会选择1内所有的2元素
  • 子选择器: 1>2{}会选择1下所有2（只能一代）
  • 相邻兄弟选择器 ：1+2{}选择！紧跟！1的所有2元素（1可能是多个，每个1最多只能选择一个2）
  • 通用兄弟选择器：1~2{}选择1后面所有兄弟关系的2元素
/*后代选择器: 1 2{}会选择1内所有的2元素*/
	body p{
	    color: red;
	}
	/*子选择器: 1>2{}会选择1下所有2（只能一代）*/
	body>p{
	    color: green;
	}
	/*相邻兄弟选择器 ：1+2{}选择！紧跟！1的所有2元素
	（1可能是多个，每个1最多只能选择一个2）*/
	p + h1{
	    color: gray;
	}
	/*通用兄弟选择器 1~2{}选择1后面所有兄弟关系的2元素*/
	p~p{
	    color: blue;
	}
  • 注意：其中1、2可以使用包括标签、类、id选择器的格式，且在以上四种选择器之间，应该没有明显优先级，遵循就近原则和基本选择器的优先级。考虑基本选择器的优先级时，以2的优先级为准。
  • 结构伪类选择器
/*第一个元孩子素*/
    nl li:first-child{
        color: red;
    }
    /*最后一个儿子元素*/
    nl li:last-child{
        color: green;
    }
    /*选择第i个 1:nth-child(i)选择1的父元素内的第i个子元素，且只有在父元素的
    第i个子元素是1时，才生效*/
    p:nth-child(1){
        color: gray;
    }
    /*1:nth-of-type(i) 选择1父元素内第i个类型为1的子元素*/
    p:nth-of-type(2){
        color: blue;
    }
  • 属性选择器
  • 通过属性甚至属性的值来选择元素
/*1[2]{} 存在2属性的1类型的元素*/
    a[id]{
    }
    /*1[2=3]{} 存在2属性的值等于3的1类型的元素
    可以使用*=表包含3或者^=表示以3开头，$=表示以3结尾*/
    a[id="123"]{}

美化网页元素

  • 字体样式
  • 文字的字体、文字大小、颜色等属性
body{
            /*字体 可以设置两种用逗号隔开，中英文分别应用两种*/
            font-family: 楷体;
            /*字体大小*/
            font-size: 50px;
            /*字体粗细*/
            font-weight: bold;
        }
        /*也可一行设置多个属性：*/
        p{
            font: oblique bold 16px 楷体;
        }
  • 文本样式
  • 背景颜色、对其方式、首行缩进、行距和装饰等
/*文字与图片居中对齐*/
	a,b{
		vertical-align: middle
	}
	body{
		/*颜色color 可以#xxxxxx表示rgb颜色，或者直接颜色命
		或者使用rgb()rgba()函数，后者多一个透明度参数*/
		color: rgb(0, 0, 0);
		/*排版：居中等*/
		text-align: center;
		/*首行缩进 em为一个字母位置*/
		text-indent: 2em;
		/*行高和块高，如果一样可以有上下居中的效果*/
		height: 100px;
		line-height: 100px;
		/*上、下、中划线 设置划线颜色大多浏览器不支持
		同时只能有一个划线，应该遵循覆盖的就近原则*/
		text-decoration-color: #d60005;
		text-decoration: underline;
		text-decoration: overline;
		text-decoration: line-through;
		/*超链接去除下划线*/
		text-decoration: none;
		/*阴影 参数：阴影颜色，水平垂直偏移，模糊半径*/
		text-shadow: black 5px 5px 1px
	}
  • 超链接伪类
  • 让超链接在被选中或者点击等状态时，有不同的形态
/*正常显示*/
    a{}
    /*鼠标悬浮的状态*/
    a:hover{}
    /*鼠标悬浮未释放的状态*/
    a:active{}
    /*已访问的链接（点过链接紫色的样子）*/
    a:visited{}