CSS入门

最新推荐文章于 2022-05-17 08:48:34 发布
最新推荐文章于 2022-05-17 08:48:34 发布
阅读量396 收藏
点赞数
分类专栏： 05软件开发 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37251897/article/details/100181383
版权

文章目录

1、HTML介绍

1）HTML 是用来描述网页的一种语言。
2）HTML 指的是超文本标记语言: HyperText Markup Language
3）HTML 不是一种编程语言，而是一种标记语言
4）标记语言是一套标记标签 (markup tag)
5）HTML 使用标记标签来描述网页
6）HTML 文档包含了HTML 标签及文本内容
7）HTML文档也叫做 web 页面

2、CSS介绍

1）CSS 指层叠样式表 (Cascading Style Sheets)
2）样式定义如何显示 HTML 元素
3）样式通常存储在样式表中
4）把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5）外部样式表可以极大提高工作效率
6）外部样式表通常存储在 CSS 文件中
7）多个样式定义可层叠为一个

3、知识点

1）使用浏览器请求网站首页的时候，浏览器会去后台服务器上下载首页的HTML文档
2）HTML文档里面可以通过link标签引入外部的CSS文件，CSS文件的访问路径可以通过href属性设置
3）浏览器根据这些CSS文件的路径到指定的服务器上进行下载
4）浏览器根据CSS文件里面的代码对网页内容的样式进行处理
image.png

4、案例

思路

1）使用HTML设计网页的内容
2）使用CSS处理网页内容的样式
3）使用CSS的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的时侯，显示对应的二级菜单
image.png

遇到的问题

问题1：
image.png
**解决办法：**设置顶层的行高为65个像素

#top{
    background-color: lightblue;
    height: 65px;
}

问题2：
image.png
**解决办法：**中间层向左浮动

#middle{
    float: left;
    border: 2px solid blue;
    background-color: plum;
    z-index: -1;
}

问题3
image.png
**解决办法：**设置无序列表的左内边距为0个像素

ul{
    list-style-type: none;  /*不显示列表项的项目符号*/
 padding-left: 0px;
}
完整代码

HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
<!--顶层-->
<div id="top">
<ul>
    <li class="first"><a href="#">主站</a></li>
    <div class="first">
        <li><a href="#">直播</a></li>
        <ul>
            <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>
    <li class="first"><a href="#">游戏中心</a></li>        
</ul>
</div>
<!--中间层-->
<div id="middle">
<p>
6月18日，记者从商务部网站获悉，上周（6月10日至16日）全国食用农产品市场价格比前一周下降0.6%。
其中，30种蔬菜平均批发比前一周下降4%，呈加速回落趋势。
6月18日，记者从商务部网站获悉，上周（6月10日至16日）全国食用农产品市场价格比前一周下降0.6%。
其中，30种蔬菜平均批发比前一周下降4%，呈加速回落趋势。
</p>
</div>
<!--底层-->
<div id="foot"></div>
</body>
</html>

CSS代码

ul{
    list-style-type: none;  /*不显示列表项的项目符号*/
 padding-left: 0px;
}
#top{
    background-color: lightblue;
    height: 65px;
}
/*设置一级菜单项的样式*/
.first{
    display: inline-block;  /*变成行里面的块元素*/
    border: 2px solid red;
    width: 32%;
 line-height: 60px;
 text-align: center;
}
/*设置二级菜单项的行高*/
ul ul li{
 line-height: 30px;
 text-align: left;
}
/*鼠标在二级菜单上面的时候，对应的样式*/
ul ul li:hover{
 background-color: yellow;
}
/*设置子菜单列表的样式*/
ul ul{
    display: none;            /*显示方式为隐藏*/
    float: left;                    /*向左浮动*/
    background-color: lightpink;
    width: 100%;
    z-index: 999;                   /*设置叠放的顺序*/
    text-indent: 2em;               /*缩进2个字符*/
}
/*当鼠标在一级菜单的上面时，显示子菜单列表*/
div.first:hover ul{
    display: block;
}
/*当鼠标在一级菜单的上面时，对应的背景样式*/
div.first:hover,li.first:hover{
    background-color: steelblue;
}
#middle{
    float: left;
    border: 2px solid blue;
    background-color: plum;
    z-index: -1;
}
a{
 text-decoration: none;
}
参考资料

[01] HTML和CSS介绍
https://blog.csdn.net/weixin_43617255/article/details/85330673
[02] CSS3 二级导航菜单的制作的示例
https://www.jb51.net/css/606302.html
[03] 纯CSS实现二级导航下拉菜单
https://blog.csdn.net/zhaiyq/article/details/81479613
[04] 块级元素和行内元素
https://www.cnblogs.com/stfei/p/9084915.html
[05] HTML行级元素和块级元素区别和转化（display属性）
https://blog.csdn.net/qingyisuo/article/details/78959942

微信扫一扫关注公众号
image.png
点击链接加入群聊

https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105

5、CSS介绍

1）CSS 指层叠样式表 (Cascading Style Sheets)
2）样式定义如何显示 HTML 元素
3）样式通常存储在样式表中
4）把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
5）外部样式表可以极大提高工作效率
6）外部样式表通常存储在 CSS 文件中
7）多个样式定义可层叠为一个

6、商品分类页面的设计

image.png

知识点

1）标签选择器根据标签名查找元素（标签选择器的写法：标签名）
2）类选择器根据class属性查找元素（类选择器的写法：点号开头+class属性值）
3）id选择器根据id属性查找元素（id选择器的写法：#号开头+id属性值）
4）使用伪类hover设置鼠标移动到元素上方时的样式
5）使用display设置元素的显示方式

完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.first{ 
 background-color:#0f7cbf;
 font-size: 36px;
 line-height: 50px;
 font-weight: bold;
 text-indent: 1em;
 color: white;
}
.third{
 font-size: 24px;
 line-height: 36px;
 color: #666;
 display: inline-block;
 margin: 10px;
 font-weight: normal;
}
.second{
 font-size: 28px;
 line-height: 50px;
 background-color: #e4f1fa;
 color: #0F7CBF;
 font-weight: bold;
 text-indent: 2em;/*缩进两个字符*/
}
ul{
 list-style: none;
 padding-left: 0px;/*内容跟左边框的间距*/
}
a{
 text-decoration: none;
 color: #666;
}
a:hover{
 color: #f60;
 text-decoration:underline; 
}
</style>
</head>
<body>
<ul>
<li class="first">家用电器</li>
<ul>
<li class="second">大家电</li>
<ul>
<li class="third"><a href="javascript:void(0);">平板电视</a></li>
<li class="third"><a href="javascript:void(0);">平板电视</a></li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
</ul>
<li class="second">大家电</li>
<ul>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
</ul>
<li class="second">大家电</li>
<ul>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
</ul>
<li class="second">大家电</li>
<ul>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
<li class="third">平板电视</li>
</ul>
</ul>
</ul>
</body>
</html>

7、clear属性和overflow属性的使用

知识点

1）浮动的元素不会占用空间（从标准文档流里面脱离）
2）如果要让非浮动元素显示在左浮动元素的下方，可以给该元素设置清除左浮动
3）如果要让非浮动元素显示在右浮动元素的下方，可以给该元素设置清除右浮动
4）如果要让非浮动元素显示在左浮动元素和右浮动元素的下方，可以给该元素设置清除两侧浮动或者设置溢出处理方式为隐藏

设置浮动
.red{
 float: left;
 background-color: red;
 width: 150px;
 height: 150px;
 margin: 10px;
}
.yellow{
 float: right;
 background-color: yellow;
 width: 200px;
 height: 200px;
 margin: 10px;
}

红色盒子向左浮动，黄色盒子向右浮动，绿色盒子出现在第一行，浮动的两个盒子位于绿色盒子的上方
image.png

清除左浮动
.green{
 background-color: green;
 height: 100px;
 width: 100%;
 clear: left;
}

清除左浮动后，绿色盒子出现在红色盒子的下方
image.png

清除右浮动
.green{
 background-color: green;
 height: 100px;
 width: 100%;
 clear: right;
}

清除右浮动后，绿色盒子出现在黄色盒子的下方
image.png

清除两侧浮动
.green{
 background-color: green;
 height: 100px;
 width: 100%;
 clear: both;
}

清除两侧浮动后，绿色盒子出现在黄色盒子的下方
image.png

设置溢出处理
.green{
 background-color: green;
 height: 100px;
 width: 100%;
 overflow: hidden;
}

设置溢出处理后，绿色盒子出现在黄色盒子的下方
image.png

完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.red{
 float: left;
 background-color: red;
 width: 150px;
 height: 150px;
 margin: 10px;
}
.yellow{
 float: right;
 background-color: yellow;
 width: 200px;
 height: 200px;
 margin: 10px;
}
.green{
 background-color: green;
 height: 100px;
 width: 100%;
 clear: both;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="yellow"></div>
<div class="green"></div>
</body>
</html>
参考资料

[01] 元素选择器（标签选择器）
http://www.w3school.com.cn/css/css_selector_type.asp
[02] CSS 类选择器
http://www.w3school.com.cn/css/css_syntax_class_selector.asp
[03] CSS id 选择器
http://www.w3school.com.cn/css/css_syntax_id_selector.asp
[04] CSS 后代选择器（派生选择器）
http://www.w3school.com.cn/css/css_selector_descendant.asp
[05] CSS 子元素选择器（儿子选择器）
http://www.w3school.com.cn/css/css_selector_child.asp
[06] CSS 并集选择器
http://www.w3school.com.cn/css/css_selector_grouping.asp
[07] CSS交集选择器
https://blog.csdn.net/liangde123/article/details/79195189
[08] CSS 伪类
http://www.w3school.com.cn/css/css_pseudo_classes.asp
[09] CSS display 属性
http://www.w3school.com.cn/cssref/pr_class_display.asp
[10] CSS 浮动
http://www.w3school.com.cn/css/css_positioning_floating.asp
[11] CSS overflow 属性
http://www.w3school.com.cn/cssref/pr_pos_overflow.asp
[12] CSS 参考手册
http://www.w3school.com.cn/cssref/index.asp

微信扫一扫关注公众号
image.png
点击链接加入群聊

https://jq.qq.com/?_wv=1027&k=5eVEhfN
软件测试学习交流QQ群号：511619105

勇敢的兵
关注
专栏目录
css基础入门
YUWA的博客
12-31 893
css基础 层叠样式表css特性：层叠性，继承性[h系和a标签除外（浏览器内核有个默认样式）] 优先级：！important>行内样式（嵌入标签）>id选择器>类选择器>标签选择器>默认样式css基础 css选择器 行高相关属性 文本元素属性 连接伪类和a标签相关属性 背景属性 border相关属性 浮动布局float 定位相关属性position 元素之间的转换属性 css初始化css选
CSS入门源代码 CSS入门源代码
05-20
这个压缩包文件“CSS入门源代码”提供了一些关于CSS基础和进阶知识的学习资源，主要包括以下几个方面： 1. **CSS选择器**：CSS选择器是用于选取HTML或XML文档中的元素的关键工具。基本选择器包括标签选择器（如`<p>...
CSS 入门
写代码是兴趣，看美美是爱好
05-17 458
目录一.CSS介绍1.CSS2.基本使用二.CSS选择器1.作用2.种类（1）ID选择器（2）class选择器（3）群组选择器（4）后代选择器（5）子代选择器（6）兄弟选择器（7）相邻选择器（8）属性选择器（9）伪类选择器3.权重三.CSS字体1.font-family 字体2.font-size 字体大小3.color文字颜色4.font-weight 文字加粗（bold 加粗）5.font-style 文字倾斜（italic）6.font-variant 大小写转换四.CSS文本1.line-heigh
css入门教程之学习网页布局(1)
12-11
在CSS入门教程中，学习网页布局是至关重要的一步。网页布局指的是通过CSS控制网页中各个元素的显示位置，使得整个页面结构清晰、美观且易于阅读。对于初学者来说，可能会误以为布局是创建网页的第一步，实际上，一个...
css入门入门入门入门
最新发布
05-23
01_CSS快速入门.mp4可能涵盖了CSS的基础知识，包括选择器的使用、盒模型、浮动和定位，这些都是CSS初学者需要掌握的基础技能。盒模型定义了元素的尺寸，包括内容、内边距、边框和外边距。浮动和定位则是布局中的重要...
[转载]《CSS网页样式设计》要点
weixin_34060741的博客
02-14 147
http://www.blueidea.com/bbs/newsdetail.asp?id=2115653&amp;posts=current第一章 概述一、CSS简介1、CSS是Cascading Style Sheets(层叠样式表单)的简称。通常所称的CSS是指CSS1,即层叠样式表单1级。2、编辑CSS文档：与编辑HTML的方法一样。有如下3种：用常见的超文本编辑器来实现，如Frontpa...
CSS入门１
spec_yue
12-13 204
CSS是为了实现样式，实际上ＨＴＭＬ也能实现样式，但是实际开发中为了使开发逻辑更加清楚，我们用ＨＴＭＬ写网页格式，用插入ＣＳＳ的方式插入样式，我将用两篇文章的篇幅去记录学习的过程。 插入ＣＳＳ三种方式 ＃１．内联式 内联式就是在ＨＴＭＬ标签里面用ｓｔｙｌｅ关键字插入，一般开发不使用 &lt;p style="color:red"&gt;这里文字是红色。&lt;/p&gt; ＃２．嵌入式 嵌入式是...
CSS简单入门
冉筱
01-12 3317
无心发个博客，没想到访问量暴增，实在是惭愧，因为写的太水了，特此说明，本篇内容浅薄，适合啥都不会的新手，大佬或者有基础就跳过吧，不忍心浪费各位的时间。 目录 一、css的介绍 CSS引入 CSS选择器 CSS选择器-浮动 布局-盒子 布局-相对定位 布局-固定定位和重叠 布局-CSS练习 有段时间没写博客了，谁的青春没有一场突如其来，猝不及防的爱情呢？就这样吧。 最近视频看的...
CSS入门（全）
han_hhh的博客
04-25 2167
文章目录6、css样式6-1 css样式的优势6-2css语法注意：6-3css注释7、css样式基本知识7-1 内联式css样式注意：7-2 嵌入式css样式7-3 外部式css样式注意：7-4 三种方法的优先级8、CSS选择器8-1选择器定义8-2标签选择器8-3类选择器注意：使用方法：8-4 ID选择器8-5 类和ID选择器的区别相同点：不同点：8-6子选择器包含(后代)选择器8-8通用选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值