HTML5开发教程—day34（笔记）

最新推荐文章于 2024-07-23 14:51:29 发布

lifetruth123

最新推荐文章于 2024-07-23 14:51:29 发布

阅读量322

点赞数

分类专栏： html5 css 文章标签： css html

本文链接：https://blog.csdn.net/weixin_43497769/article/details/112499366

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css

1 篇文章 0 订阅

订阅专栏

文章目录

主要内容：

主要内容：

1.CSS基础入门

（1）CSS的作用：
修改和美化网页
优势：实现页面结构和表现形式的分离，便于文档的维护和更新
（2）CSS书写形式：
1）外部加载形式（前端中最常用的形式，便于文档的维护和更新）

<link rel="stylesheet" type="text/css" href="外部样式表URL地址"/>

2）头部形式（书写于HTML头部区域）

<style type="text/css">
    CSS样式
</style>

3）内联形式（书写于HTML标签中）

<p stype="CSS样式">我是段落</p>

（3）CSS语法格式：
选择器 { 属性:值; 属性:值; 属性:值; …… }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>CSS基础-外部文档链接</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style>
        p{color: blue;text-align:center;}
        h1{color: #999999;font-size: 20px;}
    </style>
</head>
<body>
    <p>我的段落1</p>
    <p style="color: black;text-align: center;">我的段落2</p>
    <h1>我是标题</h1>
</body>
</html>

style.css

body{background-color: red;}

2.CSS中的选择器

（1）通配选择器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>通配选择器</title>
    <style type="text/css">
        *{color:red;}
    </style>
</head>
<body>
    <p>我的段落1</p>
    <h1>我的标题</h1>
    <ul>
        <li>我是列表</li>
    </ul>
</body>

（2）标签选择器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>标签选择器</title>
    <style type="text/css">
        h2{width: 200px;height: 100px;border: 1px solid red;text-align: center;}
    </style>
</head>
<body>
    <p>p1</p>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
</body>

（3）类选择器
类名：必须由字母开头，可以有数字、字母以及下划线

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>类选择器</title>
    <style type="text/css">
        .target01{color: red;width: 200px;height: 100px;border: 1px solid blue;}
        .target02{list-style-type: none;}
    </style>
</head>
<body>
    <p class="target01">p1</p>
    <ul>
        <li class="target01 target02">列表1</li>
        <li class="target01 target02">列表2</li>
    </ul>
</body>

（4）id选择器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #tag_01{color: rgb(255,100,232);}
    </style>
</head>
<body>
    <p id="tag_01">我是段落</p>
</body>

（5）群组选择器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>群组选择器</title>
    <style type="text/css">
        li,td,.tag_01,#tag_02{color: rgb(255,100,232);font-size: 20px;}
    </style>
</head>
<body>
    <p class="tag_01">我是段落</p>
    <h1 id="tag_02">我是标题1</h1>
    <h2 id="tag_02">我是标题2</h2>
    <ul>
        <li>我是列表</li>
    </ul>
    <table>
        <tr>
            <td>我是表格1</td>
            <td>我是表格2</td>
        </tr>
    </table>
</body>

（6）后代选择器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>后代选择器</title>
    <style type="text/css">
        /*text-decoration: none  删除文本下划线*/
        table tr a{text-decoration: none;color: blue;font-size: 3cm;}
    </style>
</head>
<body>
<table>
    <tr>
        <td>
            <div>
                <p>
                    <a href="http://www.baidu.com">百度一下，你就知道</a>
                </p>
            </div>
        </td>
    </tr>
</table>
</body>

（7）子代选择器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>子代选择器</title>
    <style type="text/css">
        tr>td{color: red;background-color: #999999;font-size: 1cm;}
    </style>
</head>
<body>
<table>
    <tr>
        <td>我是表格</td>
    </tr>
</table>
</body>

（8）属性选择器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>属性选择器</title>
    <style type="text/css">
        img[title][class="tag_01"]{border: 1px solid red;background-color: blue;}
    </style>
</head>
<body>
    <img src="" alt="" title="唯美" class="tag_01" />
    <img src="" alt="" title="唯美" class="tag_02" />
    <img src="" alt="" title="动漫" id="tag_02" />
    <h1>我是标题</h1>
    <p>我是段落</p>
</body>

（9）相邻兄弟选择器

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>相邻兄弟选择器</title>
    <style type="text/css">
        .target_01+.target_02{color: red;}
    </style>
</head>
<body>
<table>
    <tr>
        <td class="target_01">我是td1</td>
        <td class="target_02">我是td2</td>
    </tr>
    <tr>
        <td>我是td3</td>
        <td>我是td4</td>
    </tr>
</table>
</body>

3.CSS中的伪类

a:link{color: red;} /* 在点击超链接之前所表现出的样式 /
a:visited{color: #999999;} / 浏览过后的超链接样式 /
a:hover{color:green; text-decoration: none;} / 鼠标悬停在超链接上的样式 /
a:active{color: blue;font-weight: bold;} / 鼠标点击同时所表现的样式 */

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        a:link{color: red;}   /* 在点击超链接之前所表现出的样式 */
        a:visited{color: #999999;}    /* 浏览过后的超链接样式 */
        a:hover{color:green; text-decoration: none;}     /* 鼠标悬停在超链接上的样式 */
        a:active{color: blue;font-weight: bold;}  /* 鼠标点击同时所表现的样式 */
    </style>
</head>
<body>
<a href="http://www.163.com">点击跳转到163</a>
</body>

4.常用的CSS属性

常用的CSS属性
1.字体属性
    属性名称          属性值            说明
    font-family      字体             修改文字字体
    font-size        px              修改字体大小
                     cm
                     %
    font-style       normal(正常)     字体风格
                     italic(倾斜)     
    font-weight      normal(正常)     字体加粗
                     bold(加粗)
2.文本属性
    属性名称          属性值            说明
    letter-spacing   长度             字母间隔，允许使用负值
    word-spacing     长度             文字间隔
    text-decoration  underline(下划线) 文本修饰
                     overline(上划线)
                     line-through(删除线）
                     none(无)
    text-align       left(左对齐)      文本对齐方式
                     right(右对齐)
                     center(居中对齐)
                     justify(两端对齐)
    text-indent      长度或百分比       文本缩进,若为百分比那么视父级元素的宽度而定
    line-height      长度或像素         形高
3.背景属性
    属性名称                  属性值             说明
    background-color        英文单词           设置背景颜色
                            rgb
                            十六位进制数
    background-image        图片URL           设置背景图片
    background-repeat       repeat(平铺)      背景重复设定
                            repeat-x(横向平铺)
                            repeat-y(纵向平铺)
                            no-repeat(不平铺)
    background-attachment   scroll(滚动)       背景是否随滚动条滚动
                            fixed(固定)
    background-position     top               背景位置
                            bottom
                            center
                            left
                            right
4.边框属性
    属性名称                  属性值              说明
    border-color            英文单词            边框颜色
                            rgb
                            十六位进制数
    border-width            像素               边框宽度
    border-style            solid(边框样式)     边框样式
                            dashed(虚线)
                            double(双实线) 
    以缩写方式写上下左右边框单独CSS样式设置方法：
        （1）1px黑色虚线上边框
            border-top: 1px dashed #000
        （2）1px黑色实线下边框
            border-bottom: 1px solid #000
        （3）1px黑色虚线左边框
            border-left: 1px dashed #000

（1）字体属性：

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>字体属性</title>
    <style type="text/css">
        h1{font-family: "黑体";font-size: 30px;font-style: normal;}
        h2{font-family: "楷体","宋体";font-size: 2cm;font-style: italic;}    /* font-style: italic 表示倾斜 */
        /* font-weight: bold  表示字体加粗  */
        p{font-size: 200%;font-weight: bold;}
    </style>
</head>
<body>
<h1>我是第一段文字</h1>
<h2>我是第二段文字</h2>
<p>我是第三段文字</p>
</body>

（2）文本样式属性

<title>文本样式属性</title>
    <style type="text/css">
        /* text-decoration: underline 添加下划线   text-indent: 2cm 首行缩进2cm*/
        h2{
            text-decoration: underline;
            text-align: left;
            text-indent: 2cm;
            line-height: 30px;
            border:1px solid red;
            font-size: 20px;
        }
        /* text-decoration: overline 添加上划线*/
        h3{text-decoration: overline;text-align: center;}
        /*text-decoration: line-through  添加删除线*/
        h4{text-decoration: line-through;text-align: right;}
    </style>

（3）背景样式属性

    <title>背景样式属性</title>
    <style type="text/css">
        div{
            background-color: red;
            background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fa0.att.hudong.com%2F30%2F29%2F01300000201438121627296084016.jpg&refer=http%3A%2F%2Fa0.att.hudong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1615540283&t=0dfd5945a0a5aff4f5df00040d092334);
            /*background-repeat: no-repeat 不平铺*/
            background-repeat: no-repeat;
            /*background-repeat: repeat-x  横向平铺*/
            background-repeat: repeat-x;
            /*ackground-repeat: repeat-y  纵向平铺*/
            background-repeat: repeat-y;
            /*background-attachment: fixed  图片被固定，不随滚动条而滚动*/
            background-attachment: fixed;
            /*background-attachment: scroll  图片随滚动条而滚动*/
            background-attachment: scroll;
            /*background-position: bottom right 将图片放在右下方*/
            background-position: bottom right;
            height: 500px;
            border: 1px solid blue;
        }
    </style>

（4）边框样式属性

<title>边框样式属性</title>
    <style type="text/css">
        div{
            border-color: red;
            border-width: 5px;
            /*border-style: dashed  边框的表现形式为虚线*/
            border-style: dashed;
            /*border-style: double  边框的表现形式为双实线*/
            border-style: double;
        }
        p{border-bottom: 3px solid blue};
        h3{border-left: 3px dashed green};
    </style>

5.盒子模型

盒子模型
1.什么是盒子模型？
布局方式，由TABLE布局转为DIV布局，页面由多个盒子组成
2.盒子模型的组成部分：
    border(边框)
        border-top
        border-right
        border-left
        border-bottom
    padding(内边距)
        padding-top
        padding-right
        padding-left
        padding-bottom
    margin(外边距)
        margin-top
        margin-right
        margin-left
        margin-bottom
    content(文本区域)
3.内联元素与块级元素
    内联元素：
        <i></i>
        <a></a>
        <u></u>
        <b></b>
        <span></span>文本标签
        <font></font>
    块级元素：
        <body></body>
        <div></div>
        <h1></h1>~<h6></h6>
        <ul></ul>
        <ol></ol>
        <li></li>
        <p></p>
        <table></table>
        <tr></tr>
        <td></td>
    区别：块级元素独占一行，可以设置宽高、内外边距等；而内联边距不能设置宽高和上下的内外边距。

盒子模型：

    <title>盒子模型</title>
    <style type="text/css">
        body{border:3px solid red}
        div{border:2px dashed blue;margin:0px 0px 20px 20px;padding:20px}
    </style>
</head>
<body>
<div>
    我是盒子模型
</div>
</body>

内联元素和块级元素：

    <title>内联元素和块级元素</title>
    <style type="text/css">
        body{border:3px solid red}
    </style>
</head>
<body>
<span>第一个</span>
<span style="margin-left:100px;font-family: '楷体'">第二个</span>
<span>第三个</span>
</body>

6.相对定位和绝对定位

相对定位和绝对定位：
1.相对定位：
    相对于原来的位置发生改变，并且保留原来的空间位置
2.绝对定位：
        绝对定位相对于他有position属性的父级元素进行定位，如果父级元素没有position定位，
    那么就找父级的父级，直到向上找到position定位为止，如何他向上找不到position定位，
    那么就以最外层的body进行定位。并且，绝对定位不会保留原有的位置空间。
        绝对定位有四种值就改变他的位置：top right bottom left
    z-index属性：
        确定层级大小，用来设定哪一个盒子在上面

相对定位：

    <title>相对定位</title>
    <style type="text/css">
        .div01{border:2px solid red;width:200px;height:100px}
        .div02{
            border:2px solid green;
            width:200px;
            height:100px;
            background-color: green;
            position: relative;   /* 相对定位 (相对于原来的位置) */
            top:-30px;
            left:20px;
        }
        .div03{border:2px solid blue;width:200px;height:100px}
    </style>
</head>
<body>
<div class="div01">第一个盒子</div>
<div class="div02">第二个盒子</div>
<div class="div03">第三个盒子</div>
</body>

绝对定位（position: absolute）

    <title>相对定位与绝对定位</title>
    <style type="text/css">
        .box{border:2px solid blue;width:500px;height:400px;position:relative;}
        /*z-index: 1  设置层级  谁层级值高谁就在外层*/
        .div01{
            width: 100px;
            height:100px;
            background-color: green;
            position: absolute;
            right:0px;
            bottom:0px;
            z-index: 1
        }
        .div02{width: 100px;height: 100px;background-color: yellow;position:absolute;right: 30px;bottom:30px;}
    </style>
</head>
<div class="box">
    <div class="div01"></div>
    <div class="div02"></div>
</div>

7.浮动

浮动
1.浮动效果：
    满足我们的页面排版要求，使竖列的盒子横向的排列起来。
    负作用：因为浮动元素脱离了标准文档流，导致父级元素无法被撑开。
    解决方式：清除浮动负面效果（三种方式）
    1.添加空盒子、较流行、缺点是为了清除浮动，页面添加的多余空盒子太多，新手容易晕
        在被浮动元素的后面（同级元素）添加一个空的div，并且定义为一个clear类，附给该div。
        .clear{clear:both;}
    2.overflow:hidden、较简单、亲测兼容于市面浏览器、负面效果不详、暂不推荐使用。
        定义clear类，并把clear类附给浮动元素的父级元素
        .clear{display:block;overflow:hidden}
    3.最流行、最常用、可兼容所有浏览器
        定义clear类，使用伪元素：after，并把clear类附给浮动元素的父级元素。
        .clear:after{display:block;clear:both;content:"...";visibility:hidden;height:0;}
        .clear{zoom:1}

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>浮动</title>
    <style type="text/css">
        .box{border:1px solid red}
        /*float:left;  向左看齐*/
        .box01{border:1px solid blue;width:200px;height:100px;float:left;}
        .box02{border:1px solid green;width:500px;height:100px;float:left;}
        /*.clear{clear:both;}  清除浮动*/
        /*.clear{clear:both;}*/
        .clear:after{display: block;content: ".";clear: both;visibility: hidden;height:0;}
        .clear{zoom:"1";}
    </style>
</head>
<body>
<div class="box clear">
    <div class="box01">我是第一个盒子</div>
    <div class="box02">我是第二个盒子</div>
<!--    <div class="clear"></div>-->
</div>
</body>

8.div+css布局实例项目

top区域

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>店铺首页</title>
    <style type="text/css">
        /*公共css样式  清除内外边距*/
        *{margin:0;padding:0;}
        .body{border:2px solid red;font-size: 12px;color: #333;margin: 0 auto;width:960px;}
        ul{list-style: none;}
        /*清除浮动*/
        .clear{display:block;overflow:hidden;}
        .head{border:1px solid blue;}
        .top{border:1px solid green;line-height: 28px;}
        .top ul li{float:left;margin:8px;}
        .top div{float:left;}
        .top ul{float:right;}
        a:link{color: #333;}   /* 在点击超链接之前所表现出的样式 */
        a:visited{color: #333;}    /* 浏览过后的超链接样式 */
        a:hover{color:red;}     /* 鼠标悬停在超链接上的样式 */
        a:active{color: red;}  /* 鼠标点击同时所表现的样式 */
        a{text-decoration: none;}
    </style>
</head>
<body>
<div class="body">
<!--    head区域开始-->
    <div class="head">
        <!--    top区域开始-->
        <div class="top clear">
            <div><span>欢迎你回来！ID！</span><a href="#">退出</a></div>
            <ul class="clear">
                <li><a href="#">网站首页</a></li>
                <li><a href="#">网站导航</a></li>
                <li><a href="#">我的服务</a></li>
                <li><a href="#">会员中心</a></li>
                <li><a href="#">意见箱</a></li>
            </ul>
        </div>
        <div class="head_img"></div>
        <div class="nav"></div>
    </div>
</div>
</body>

在这里插入图片描述

lifetruth123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5开发教程—day34（笔记）

文章目录主要内容：1.CSS基础入门2.CSS中的选择器主要内容：1.CSS基础入门（1）CSS的作用：修改和美化网页优势：实现页面结构和表现形式的分离，便于文档的维护和更新（2）CSS书写形式：1）外部加载形式（前端中最常用的形式，便于文档的维护和更新）<link rel="stylesheet" type="text/css" href="外部样式表URL地址"/>2）头部形式（书写于HTML头部区域）<style type="text/css">
复制链接

扫一扫

专栏目录