2021-06-03

最新推荐文章于 2022-05-26 23:00:11 发布

晏虹计科非

最新推荐文章于 2022-05-26 23:00:11 发布

阅读量121

点赞数 3

本文链接：https://blog.csdn.net/wwwwww234523/article/details/117532356

版权

前言

本文主要是总结了HTML CSS相关知识点以及CSS常用选择器及字体属性、行高属性、宽度以及CSS盒子模型的相关练习示例

一、边框

border：样式

border-style

指定要显示的边框类型
可以设置一到四个值（用于上边框、右边框、下边框和左边框）
dotted：定义点线边框
dashed ：定义虚线边框
solid ：定义实线边框
double：定义双边框
none：定义无边框
hidden：定义隐藏边框

border-width

指定四个边框的宽度
可以设置一到四个值（用于上边框、右边框、下边框和左边框）

border-color

	设置四个边框的颜色
		name：指定颜色名
		HEX： 指定十六进制值
		RGB：指定 RGB 值
		HSL：指定 HSL 值
		transparent
	如果未设置 border-color，则边框将继承元素的颜色
	可以设置一到四个值（用于上边框、右边框、下边框和左边框）

二、CSS介绍

是一种描述 HTML 文档样式的语言
描述应该如何显示 HTML 元素

层叠样式表

用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局

变量

var() 函数：插入 CSS 变量的值

优点

可以从 HTML 页面中删除了样式格式
外部样式表储存在CSS文件中，只需更改一个文件就能改变外观

三、语法

格式

样式名：样式值

选择器

	（p）指向需要设置样式的HTML元素

分类

简单选择器

根据元素名称选择HTML元素
根据id属性来选择元素
ID唯一，所以该选择器用于选择唯一元素
要选择特定的元素的话需要加“#”
id名称不能以数字开头
根据class属性选择元素
要在类名前加“."
元素可以引用多个类
类名不能以数字开头

组合器选择器

根据它们之间的特定关系来选取元素

包含选择器

包含选择符名 选择符{样式}

子选择器

父级选择符名<子选择符{样式}

兄弟选择器

兄选择符名~弟选择符名{样式

分组选择器

选择符，选择符，……{样式}

伪类选择器

根据特定状态选取元素
点击时效果，鼠标引入时效果

伪元素选择器

选取元素的一部分并设置其样式

属性选择器

根据属性或属性值来选取元素
frist-child:同类元素中的第一个元素
last-child:同类元素中的最后一个元素
nth-child():选择同类元素中指定元素 
n 表示0到正无穷
2n 表示偶数行
2n+1表示奇数行

声明块{}

	包含一条或多条用分号分隔的声明
	例子：p {
             color: red;
             text-align: center;
            }
	每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔
	多条 CSS 声明用分号分隔，声明块用花括号括起来

四、背景

background-color

指定元素的背景色

方法

有效的颜色名称
十六进制值
RGB 值

opacity

	指定元素的透明度
	取值范围为 0.0 - 1.0。值越低，越透明
	所有子元素会继承

RGBA

将 RGB 颜色值与 alpha 通道一起使用
子元素不会继承透明度

五、CSS使用

外部 CSS

通过使用外部样式表只需修改一个文件即可改变整个网站的外观
每张 HTML 页面必须在<head>部分的 <link> 元素内包含对外部样式表文件的引用

扩展名

.CSS
.CSS不能包含任何HTML标签
属性值和单位值之间不要添加空格

内部 CSS

当一张 HTML 页面拥有唯一的样式时使用内部样式表
在 <head> 部分的 <style> 元素中进行定义

行内 CSS(不建议使用）

行内样式（也称内联样式）可用于为单个元素应用唯一的样式
将style属性添加到相关元素,可以使用行内样式
style 属性可包含任何 CSS 属性

缺点

失去了样式表的许多优点（通过将内容与呈现混合在一起）

指定多个样式时优先级（从高到低）

行内样式
外部和内部样式表
浏览器默认样式

六、盒子模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素：
	                                        边距
	                                        边框
                                        	填充
	                                       实际内容
允许在其它元素和周围元素边框之间的空间放置元素

Margin

	外边距

Border

	边框

padding

	内边距

content

	内容

总元素宽高计算

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

七、相关练习

家用电器分类

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>家用电器分类</title>
    <style>
        *{
            margin:0;
            padding:0;
            box-sizing:border-box;}
    a{color:#666;
        line-height:20px;
        text-decoration: none;}
    .menu{width:220px;}
    .menu h2{width:100%;
        height:30px;
        line-height:30px;
        font-size:14px;
        padding-left:10px;
        background: #0F7CBF;}
    .menu h2 a{color:#fff;}
    .menu .item h3{height: 30px;
        line-height:30px;
        padding-left:15px;
        background: #E4F1FA;}
    .menu .item h3 a{color:#0F7CBF;
        font-size: 18px;}
    .menu .item p{padding: 15px;
        line-height: 14px;}
    .menu .item p a{font-size: 12px;} 
    h3:hover{
        text-decoration:underline;}
    a:hover{
    color:#F60;
    text-decoration:underline;}
    p:hover{
    color:#F60;
    text-decoration:underline;    
    }
    </style>
</head>
<body>
    <div class="menu">
        <h2><a href="#">家用电器</a></h2>
        <div class="item">
            <h3><a href="#">大家电</a></h3>
            <p>
                <a href="#">平板电视</a><a href="#">洗衣机</a> <a href="#">冰箱</a><br>
                <a href="#">空调</a> <a href="#">烟机/灶具</a> <a href="#">热水器</a><br>
                <a href="#">冷柜/酒柜</a> <a href="#">消毒柜</a> <a href="#">家庭影院</a><br>
            </p>
        </div>
        <div class="item">
            <h3><a href="#">生活电器</a></h3>
            <p>
                <a href="#">电风扇</a><a href="#">净化器</a> <a href="#">吸尘器</a><br>
                <a href="#">净水设备</a> <a href="#">挂烫器</a> <a href="#">电话机</a><br>
            </p>
        </div>
        <div class="item">
            <h3><a href="#">厨房电器</a></h3>
            <p>
                <a href="#">榨汁机</a> <a href="#">电压力锅</a> <a href="#">电饭煲</a><br>
                <a href="#">豆浆机</a> <a href="#">微波炉</a> <a href="#">电磁炉</a><br>
            </p>
        </div>
        <div class="item">
            <h3><a href="#">五金家装</a></h3>
            <p>
                <a href="#">沐浴/水槽</a> <a href="#">电动工具</a> <a href="#">手动工具</a><br>
                <a href="#">仪器仪表</a> <a href="#">浴霸/排气</a> <a href="#">灯具</a><br>
            </p>
        </div>
    </div>
</body>
</html>

结果如图：

加入下划线效果
在这里插入图片描述

五彩导航

代码如下（示例）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五彩导航</title>
    <style> 
    a{
       display:inline-block;
       height:58px;
       width:120px;
       color:rgb(255,255,255);
       font-style:14px;
       text-decoration: none;
       line-height: 48px;
       text-align: center;  
   } 
   .demo1 {
            background-image: url(images/bg1.png);
        }
 
        .demo1:hover {
            background-image: url(images/bg5.png);
        }
   .demo2 {
            background-image: url(images/bg2.png);
 
        }
 
        .demo2:hover {
            background-image: url(images/bg6.png);
        }
 
        .demo3 {
            background-image: url(images/bg3.png);
 
        }
 
        .demo3:hover {
            background-image: url(images/bg1.png);
        }
 
        .demo4 {
            background-image: url(images/bg4.png);
 
        }
 
        .demo4:hover {
            background-image: url(images/bg1.png);
        }
 
        .demo5 {
            background-image: url(images/bg5.png);
 
        }
 
        .demo5:hover {
            background-image: url(images/bg3.png);
        }

    </style>
</head>
<body>
    <a href="" class="demo1">五彩导航</a>
    <a href="" class="demo2">五彩导航</a>
    <a href="" class="demo3">五彩导航</a>
    <a href="" class="demo4">五彩导航</a>
    <a href="" class="demo5">五彩导航</a>
  
</body>
</html>

结果：
点击前
点击后：
在这里插入图片描述
鲁能足球队：
代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鲁能足球</title>

<meta charset="UTF-8">
    <title>鲁能案例</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none;
      color: #0454a7;
    }
    a:hover {
      text-decoration: underline;
    }
    .box {
      width: 638px;
      margin: 118px auto;
      border: solid 1px #BBBBBB;
      padding: 26px 48px;
      border-top: 2px solid #0454a7;
    }
    .box h2 {
      color: #000000;
      font-family: "Microsoft Yahei",微软雅黑,黑体,serif;
      font-size: 22px;
      font-weight: normal;
      height: 35px;
      line-height: 35px;
      overflow: hidden;
      text-align: center;
    }
    .artInfo {
      border-bottom: solid 1px #ccc;
      color: #999;
      padding: 10px 0;
      text-align: center;
      font-size: 12px;
    }
    .artInfo a {
      color: #999;
      text-decoration: none;
      margin: 0 10px;
    }
    .artInfo a:hover {
      text-decoration: underline;
    }
    .time {
      margin: 0 10px;
    }
    .re {
      color: #b60c0c !important;
    }
    .article {
      padding: 20px;
      font-size: 14px;
      line-height: 23px;
      color: #333;
    }
    .img-wrap {
      text-align: center;
    }
    .img-wrap span {
      line-height: 20px;
      padding: 6px 0;
      font-size: 12px;
      margin: 5px auto;
      display: inline-block;
    }
    .article p {
      text-indent: 2em;
    }
    .ln {
      border: 1px dashed #ccc;
      padding: 10px;
      margin-top: 10px;
    }
    .ln a {
      color: #0454a7;
      text-decoration: none;
    }
    .info {
      text-align: right;
      font-size: 12px;
    }
    .keywords {
      margin: 10px 0;
    }
    .keywords span {
      font-weight: bold;
    }
    .load {
      margin: 0 20px;
      padding: 2px 0;
      border: 1px solid #0454a7;
      text-align: center;
      background-color: rgb(222,226,243);
    }
  </style>
  </head>

<body>
    <div class="box">
          <h2>鲁能热身赛16-0大胜业余队 野牛4球蒙蒂略戴帽</h2>
          <div class="artInfo">
            <span class="time">2015年08月08日18:19</span>
              <a href="#" class="re">新浪体育</a>微博
              <a href="#">我有话说(<span class="re">10,370</span>人参与)</a>
              <a href="#">收藏本文</a>
          </div>
          <div class="article">
            <div class="img-wrap">
              <img src="images/img.jpg" height="427" width="570"/>
              <span>鲁能热身赛16-0大胜</span>
            </div>

            <p>北京时间8月8日消息，山东鲁能俱乐部在训练基地内与业余球队山东太阳金
              店足球俱乐部进行了一场热身赛，最终鲁能以16-0大胜对手，阿洛伊西奥上演
              大四喜，韩鹏和蒙蒂略完成帽子戏法，尤西雷梅开二度，塔尔德利、赵明剑、张
              文钊、成源均取得进球。</p>
     
            <div class="ln">
              <a href="#">鲁能泰山足球新闻</a>#鲁能泰山#鲁能热身赛16-0击败一支业余球队
              ，韩鹏和蒙蒂略帽子戏法，野牛大四喜，尤西雷梅开二度，塔尔德利、赵明剑、张文
              钊、成源取得进球。
              <div class="info">2015-08-08 17:54 来自百度浏览器
                转发(49) | 收藏 | 评论(50)</div>
            </div>
            <p>由于国足征战东亚杯比赛，中超联赛获得了两周的间歇期，山东鲁能训练备战同时，也
              邀请了一支业余球队进行热身赛。尽管王大雷、王永珀、杨旭、王彤等人随国足征战东亚杯
              ，但鲁能还是派出了现有最强阵容，以16-0大胜了对手，据悉上半场就取得了9-0的领
              先，尽管与业余球队比赛，胜负并不重要，但这样的大比分胜利也能看出鲁能全队目
              前状态不错。</p>
            <p>下周三中超第22轮就将打响，山东鲁能客场挑战北京国安，两支争冠球队的直接对话
              ，无疑是本轮最焦点之战。由于国足本周日才结束东亚杯赛事，鲁能阵中的国脚体能
              能恢复多少非常关键，而以现有的鲁能球员组成的阵容，实力也绝对不容小觑。(瑪塔)</p>
            <div class="keywords">
              <span>文章关键词：</span>
              <a href="#">中超</a>
              <a href="#">鲁能</a>
              <a href="#">阿洛伊西奥</a>
              <a href="#">蒙蒂略</a>
            </div>
            <div class="load">
              <a href="#">点击下载【新浪体育客户端】，赛事视频直播尽在掌握</a>
            </div>
          </div>
        </div>
       
    
</body>
</html>

结果如图：
在这里插入图片描述

晏虹计科非

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-06-03

文章目录前言一、边框border：样式border-styleborder-widthborder-color二、CSS介绍层叠样式表变量优点三、语法格式选择器分类简单选择器组合器选择器包含选择器子选择器兄弟选择器分组选择器伪类选择器伪元素选择器属性选择器声明块{}四、背景background-color方法opacityRGBA五、CSS使用外部 CSS扩展名内部 CSS行内 CSS(不建议使用）缺点指定多个样式时优先级（从高到低）六、盒子模型MarginBorderpaddingcontent总元素..
复制链接

扫一扫