概念

Cascading Style Sheets 层叠样式表
层叠:多个样式可以作用在同一个html的元素上,同时生效.

好处:1.功能强大
2.将内容展示与样式控制分离
*降低偶尔度(解耦)
*让分工协作更容易
*提高开发效率

使用

CSS与html结合方式(1)内联方式(2)内部样式(3)外部样式,css作用域范围(3)>(2)>(1)

内联方式
在标签内使用style属性指定CSS代码
作用域:当前标签

<div style="color:red;">hello CSS</div>

内部样式
在head标签内,定义style标签,style标签的标签体内容就是css代码
作用域:当前页面中的所有标签

<style>
   div{
      color:blue;
   }
</style>
<div>hello css</div>

外部样式
1.定义CSS资源文件
2.在head标签内,定义link标签,引入外部的资源文件
3.作用域:所有div标签中内容

文件 test.css文件

div{
    color:green;
}

<link rel="stylesheet" href="./test.css">
<div>hello css</div>

或者

<style>
   @import"./test.css";
</style>

语法

格式:
选择器{
属性名1:属性值1;
属性名2:属性值2;
…
}
*选择器-筛选具有相似特征的元素
*注意:每一对属性需要使用;隔开,最后一对可以不加;

选择器

基本选择器

id选择器

选择具体的id属性值元素.建议在一个html页面中id唯一
语法:#id属性值{ }

<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: blue;
        }
    </style>
</head>
<body>
     <div id="div1"> 传智播客</div>
</body>

元素选择器

选择具有相同标签名称的元素
语法:标签名称{ }

<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        div{
            color: chartreuse;
        }
    </style>
</head>
<body>
     <div>黑马程序员</div>

</body>

类选择器

选择具有相同的class属性值的元素
语法:.class属性值{ }

<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        .cs1{
            color: blueviolet;
        }
    </style>
</head>
<body>
     <p class="cs1">传智学院</p>
</body>

注意:基础选择器的优先级:类选择器>元素选择器>id选择器

扩展选择器

选择所有元素
语法:*{ }

并集选择器
语法:选择器1,选择器2{ }

子选择器
筛选选择器1元素下的选择器2元素
语法:选择器1 选择器2{ }

父选择器
筛选选择器2的父元素选择器1
语法:选择器1 >选择器2{ }

属性选择器
选择元素名称,属性名=属性值的元素
语法:元素名称[属性名=“属性值”]{ }

伪类选择器
语法 元素:状态{ }
如 < a >
状态:link-初始化的状态
visited-被访问过的状态
active-正在访问的状态
hover:鼠标悬浮的状态

属性

1.字体,文本
font-size字体大小
color文本颜色
test-align对齐方式
line-height行高
2.背景
background
3.边框
border设置边框,复合属性
4.尺寸
width:宽度
height:高度
5.盒子模型
margin外边距
pedding内边距,默认情况下内边距会影响整个盒子的大小属性box-sizing:border-box;设置盒子的属性,让width和height就是最终盒子的大小
float浮动 left right

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p{
            color: crimson;
            font-size: 30px;
            text-align: center;
            line-height: 200px;
            border: 1px solid red;
        }
        div{
            border: 1px solid red;
            height: 200px;
            width: 200px;
            background: url("img/TW.jpg") no-repeat center;
        }
    </style>
</head>
<body>
      <p>Mark</p>
      <div></div>
</body>
</html>