CSS层叠样式表

Cascading Style Sheet, 作用: 美化页面, 相当于装修

如何在HTML页面中添加CSS样式代码

三种引入方式:
- 内联: 在标签的style属性中添加样式代码, 弊端:不能复用
- 内部: 在head标签里面添加style标签,在标签体内通过选择器找到需要添加样式的元素,然后再添加样式代码, 这种用法可以复用,但是只能当前页面复用,不能多页面复用
- 外部: 在单独的css样式文件中写样式代码,在HTML页面中通过link标签引入, 可以实现多页面复用

选择器

作用: 用来查找元素的, 找到之后才能添加样式

标签名选择器: 通过标签的名称选择页面中所有同名元素

格式: 标签名{样式代码}

id选择器: 通过页面中元素的id选择元素, 元素的id是唯一标识不能重复

格式: #id{样式代码}

类选择器: 如果需要选择多个不相关的元素, 可以给多个元素添加相同的class属性值,然后通过类选择器进行选择

格式: .class{样式代码}

分组选择器: 将多个选择器合并成一个选择器

格式: div,#id,.class{样式代码}

属性选择器: 通过元素的属性选择元素

格式: 标签名[属性名='值']{样式代码}

任意元素选择器: 选取页面中所有标签

格式: *{样式代码}

选择器续

子孙后代选择器: 通过元素和元素之间的关系匹配元素

格式: body div div p{样式代码} 匹配body里面的div里面的div里面的所有p(包括后代)

子元素选择器:通过元素和元素之间的关系匹配元素

格式: body>div>div>p{样式代码}匹配body里面的div里面的div里面的p子元素(不包括后代)

伪类选择器: 此选择器选择的是元素的状态,元素状态包括: 未访问,访问过状态,悬停状态,点击/激活状态

格式: a:link/visited/hover/active{样式代码}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*子孙后代选择器*/
    /*   body div div p{
            color: red;
        }*/
        /*子元素选择器*/
        body>div>p{
            color: red;
        }
        /*伪类选择器*/
        a:link{color: red}/*未访问*/
        a:visited{color: green}/*访问过*/
        a:hover{color: yellow}/*悬停*/
        a:active{color: blue}/*点击/激活*/
    </style>
</head>
<body>
<a href="http://www.tedu.cn">超链接1</a>
<a href="http://www.baidu.com">超链接2</a>
<a href="http://www.youku.com">超链接3</a>
<p>p1</p>
<div>
    <p>p2</p>
    <div><p>p3</p></div>
    <div>
        <p>p4</p>
        <div><p>p5</p></div>
    </div>
</div>
</body>

颜色赋值

三原色RGB RedGreenBlue , 每种颜色的取值范围0-255
五种赋值方式:
- 颜色单词赋值: red/green/blue/yellow/pink....
- 6位16进制: #ff 00 00
- 3位16进制: #f00
- 3位10进制: rgb(255,0,0)
- 4位10进制: rgba(255,0,0,0-1) a=alpha 透明度值越小越透明

背景图片

background-image:url("路径") 设置背景图片
background-size:100px 200px; 设置背景图片尺寸
background-repeat: no-repeat; 禁止重复
background-position:200px 100px; 设置背景图片位置

background-position:50% 100%; 设置背景图片位置

html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            color: red;
            color: #00ff00;
            color: #00f;
            color: rgb(255,255,0);
            color: rgba(255,0,0,0.2);
        }
        #d1{
            width: 200px;
            height: 200px;
            background-color: purple;
            /*设置显示的背景图片*/
            background-image: url("../imgs/a.jpg");
            /*设置背景图片的尺寸: 宽 高*/
            background-size: 100px 100px;
            /*禁止重复*/
            background-repeat: no-repeat;
            /*控制位置:横向x  纵向y 通过像素偏移值*/
            background-position: 20px 50px;
            /*控制位置:横向x  纵向y 通过百分比*/
            background-position: 80% 80%;
        }
        #d2{
            width: 611px;
            height: 376px;
            background-color: #e8e8e8;
            background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png");
            background-repeat: no-repeat;
            background-size: 318px 319px;
            background-position: 90% 80%;
        }
    </style>
</head>
<body>
<div id="d2"></div>
<div id="d1">背景测试</div>
<h1>颜色测试</h1>
</body>
</html>

文本和字体相关样式

text-align:left/right/center; 水平对齐方式
text-decoration:overline/underline/line-through/none; 文本修饰
line-height:20px; 设置行高
text-shadow:颜色 x偏移值 y偏移值模糊度; 设置阴影
font-size:20px; 字体大小
font-weight:bold加粗/normal去掉加粗;
font-style:italic; 斜体
font-family:xxx,xxx,xxx; 设置字体
font: 20px xxx,xxx,xxx; 字体大小+字体设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 40px;
            border: 1px solid red;
            /*文本水平对齐方式*/
            text-align: center;
            /*文本修饰 overline上划线,
            underline下划线,line-through删除线,none去掉文本修饰*/
            text-decoration: line-through;
            /*行高,控制行间距,如果只有单行文本可以实现垂直居中*/
            line-height: 40px;
            /*文本阴影:颜色 x偏移值 y偏移值 模糊度(值越小越清晰)*/
            text-shadow: green 5px 5px 5px;
            /*字体大小*/
            font-size: 20px;
            /*加粗*/
            font-weight: bold;
            /*设置字体*/
            font: 30px cursive;
        }
        a{text-decoration: none}
        h1{
            font-weight: normal;/*去掉加粗*/
            /*斜体*/
            font-style: italic;
            /*设置字体*/
            font-family: cursive;
        }

    </style>
</head>
<body>
<h1>这是h1</h1>
<a href="">超链接</a>
<div>文本和字体</div>
</body>
</html>

元素的显示方式display

block: 块级元素的默认值, 特点: 独占一行,可以修改宽高,包括: h1-h6,p, div
inline: 行内元素的默认值, 特点: 共占一行,不能修改宽高, 包括: span,b加粗,i斜体,u下划线,s删除线,a超链接等
inline-block:行内块元素的默认值, 特点:共占一行,并且可以修改宽高, 包括:input,img

none: 隐藏元素

行内元素不能修宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*块级元素 独占一行 可以修改宽高*/
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        span{
            /*行内元素 共占一行 不能修改宽高*/
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }
        img{
            /*行内块元素 共占一行 可以修改宽高*/
            width: 100px;
            height: 100px;
        }
        a{
            background-color: #0aa1ed;
            width: 132px;
            height: 40px;
            /*如果行内元素需要修改宽高, 必须将显示方式改成block或inline-block*/
            display: block;
            text-align: center;
            line-height: 40px;
            color: white;
            text-decoration: none;
            font-size: 20px;
            border-radius: 3px;/*设置圆角,值越大越圆*/
        }
    </style>
</head>
<body>
<a href="">查看详情</a>
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

盒子模型

盒子模型= content内容+margin外边距+padding内边距+border边框
作用: 控制元素的显示效果
- content内容: 控制元素的显示大小
- margin外边距: 控制元素的显示位置
- padding内边距: 控制元素内容的位置
- border边框: 控制元素的边框效果

盒子模型之Content内容

通过width和height设置元素的内容大小
两种赋值方式
- 像素
- 上级元素的百分比

行内元素不能修改宽高,如必须要修改则需要设置为block块级元素或inline-block行内块元素

盒子模型之Margin外边距

作用: 控制元素的显示位置
赋值方式:
- margin-left/right/top/bottom:10px; 单独某一个方向赋值
- margin:20px; 四个方向赋值
- margin:10px 20px; 上下和左右赋值
- margin:10px 20px 30px 40px; 上右下左顺时针赋值
行内元素上下外边距无效
上下相邻彼此添加外边距取最大值, 左右相邻两者相加
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题,给上级元素添加overflow:hidden 解决
部分标签自带外边距,比如: h1-h6内容标题, p段落标签, 列表标签,body

盒子模型之border边框

作用: 控制元素边框的效果
赋值方式:
- border:粗细样式颜色; 四个方向添加边框
- border-left/right/top/bottom:粗细样式颜色; 单独某一个方向添加边框

border-radius:10px; 设置圆角值越大越圆, 超过宽高的一半时为正圆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*块级元素 独占一行 可以修改宽高*/
            border: 1px solid red;
            width: 100px;
            height: 100px;
        }
        span{
            /*行内元素 共占一行 不能修改宽高*/
            border: 1px solid blue;
            width: 100px;
            height: 100px;
        }
        img{
            /*行内块元素 共占一行 可以修改宽高*/
            width: 100px;
            height: 100px;
        }
        a{
            background-color: #0aa1ed;
            width: 132px;
            height: 40px;
            /*如果行内元素需要修改宽高, 必须将显示方式改成block或inline-block*/
            display: block;
            text-align: center;
            line-height: 40px;
            color: white;
            text-decoration: none;
            font-size: 20px;
            border-radius: 3px;/*设置圆角,值越大越圆*/
        }
    </style>
</head>
<body>
<a href="">查看详情</a>
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<img src="../imgs/a.jpg" alt="">
<div>div1</div>
<div>div2</div>
<div>div3</div>
<span>span1</span>
<span>span2</span>
<span>span3</span>
</body>
</html>

盒子模型之padding内边距

作用: 控制元素内容的位置
赋值方式: 和外边距类似
- padding-left/right/top/bottom:10px; 单独某个方向添加
- padding:10px; 四个方向添加
- padding:10px 20px; 上下和左右
- padding:10px 20p 30px 40px; 上右下左顺时针添加
给元素添加内边距会影响元素的宽高,box-sizing: border-box;给元素添加此样式后边框和内边距则不再影响宽高

列表标签自带内边距

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1{
      width: 400px;
      height: 200px;
      border: 20px solid red;
      /*设置圆角,值越大越圆, 超过宽高一半为正圆(前提是正方形)*/
      border-radius: 200px;
    }
    #d2{
        width: 50px;
        height: 50px;
        border:1px solid red;
        /*给元素添加内边距会影响元素的显示宽高*/
        padding-left: 50px;
        padding-top: 50px;
    }
  </style>
</head>
<body>
<ul>
    <li>aaa</li>
    <li>bbb</li>
    <li>ccc</li>
</ul>
<div id="d2">内边距</div>
<!--div#d1   +tab    div.c1   +tab-->
<div id="d1">边框测试</div>
</body>
</html>

CSS的三大特性

继承性: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响,比如超链接字体颜色
层叠性: 多个选择器可以选择同一个元素, 如果添加的样式不同,则全部层叠生效, 如果添加的样式相同则由优先级决定哪个生效
优先级: 指选择器的优先级, 作用范围越小优先级越高

!important>id选择器>类选择器>标签名选择器>继承(因为继承属于间接选中)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    body{
      /*通过继承可以将全局样式写在body里面,整个页面所有标签全部继承*/
      font-family: cursive;
    }
    #d1{
      color: red;
    }
    div{
      color: green !important;
    }
    p{color: blue;}
  </style>
</head>
<body>
<div id="d1">
  <p>这是p标签</p>
  <span>这是span</span>
  <a href="">超链接</a>
</div>
</body>
</html>

web前端-CSS层叠样式表

CSS层叠样式表

如何在HTML页面中添加CSS样式代码

选择器

选择器续

颜色赋值

背景图片

文本和字体相关样式

元素的显示方式display

盒子模型

盒子模型之Content内容

盒子模型之Margin外边距

盒子模型之border边框

盒子模型之padding内边距

CSS的三大特性

相关推荐