Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
2024-04-08 21:00:14
Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式
- 一、CSS简介
- （一）、什么是CSS？
- （二）、CSS能够干什么？
- （三）、CSS语法结构
- （四）、CSS的使用方式
- 1、内嵌样式
- 2、内部样式
- 3、外部样式
- 4、优先级比较
- 5、案例源码
- 6、案例运行效果
- 二、CSS选择器
- （一）、基本选择器
- 1、标签选择器
- 2、类选择器
- 3、id选择器
- 4、嵌套选择器
- 5、父子关系
- 6、并列关系
- 7、属性选择器
- 三、常用（文本、字体、列表、背景、超链接）样式
- （一）、常用文本、字体样式
- （二）、列表样式
- （三）、常用背景样式及雪碧图
- （四）、常用超链接样式以及伪类
一、CSS简介
（一）、什么是CSS？
CSS指层叠样式表 (英文Cascading Style Sheets)。
（二）、CSS能够干什么？
提升网页开发的工作效率，控制多重网页的样式和布局。
（三）、CSS语法结构
p{color: blue;}h1,p：选择器，表示选择网页中所有的p标签（段落）color：属性，表示段落字体的颜色属性blue：值，设置p标签中字体的颜色为blue（蓝色）;：分号用于分隔多个属性
（四）、CSS的使用方式
1、内嵌样式
使用标签style属性，在style属性是值中书写样式，只能控制当前的HTML标签。
<h1 style="color: teal;">书愤</h1>
设置这一个h1标签的字体颜色为teal，其它h1标签不受影响
2、内部样式
在head头部，使用style标签，在style标签内书写样式，控制整个网页样式。
<style type="text/css">p{color: blue;}
</style>
type="text/css"：表示这是样式文件
p{color: blue;}：具体的样式内容
3、外部样式
写在css文件中，可以控制所有引用该样式文件的网页。
style1.css文件名，下面是内容，css文件内不需要style标签
body{
text-align: center;
background-color: cyan;
}
使用link标签引入：
<link rel="stylesheet" type="text/css" href="css/style1.css"/>
4、优先级比较
内嵌样式优先于内部样式和外部样式；
内部样式和外部样式和优先级取决于style标签位置和link引入标签位置，因为网页是从上往下解析，所以style标签（内部样式）和linl标签（外部样式引入）谁靠下谁优先级高，因为下面的后解析会覆盖先解析的数据。
因此网页若有外部样式表引入，建议先引入再写内部样式，服从控制范围越小，优先级越高的一般原则。
5、案例源码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>初识样式表CSS</title><link rel="stylesheet" type="text/css" href="css/style1.css"/><style type="text/css">p{color: blue;}</style></head><body><h1 style="color: teal;">书愤</h1><p>早岁哪知世事艰，中原北望气如山。</p><p>楼船雪夜瓜洲渡，铁马秋风大散关。</p><p>塞上长城空自许，镜中衰鬓已先斑。</p><p>出师一表真名世，千载谁堪伯仲间。</p></body>
</html>
6、案例运行效果
二、CSS选择器
选择器用于选择你想要的元素的样式。
（一）、基本选择器
1、标签选择器
格式：HTML标签{css语句···}
所有的HTML标签都可使用
若有多个标签，则标签之间以“,”分隔
控制范围：所有的div和p标签里的元素都会使用该样式
案例：
CSS代码：
<style type="text/css">div,p{color: red;font-size: 20px;}
</style>
HTML代码：
<body><h1>CSS选择器学习</h1><p>学习时间：2019/5/11</p><div ><p>作者：Mr.C</p><h1>标签选择器（element，element）</h1><p>示例：div，p</p><p>说明：所有<div>元素和<p>元素</p></div><p>学习完标签选择器（element，element）了</p>
</body>
运行效果
2、类选择器
格式：.类名{css语句···}
控制范围：所有class="类名"的标签
案例：
.code{font-weight: bolder;font-size: 15px;color: black;
}
使用：
<pre class="code">···</pre>
3、id选择器
格式：#ID{css语句···}
ID不可以以数字开头，可以字母数字混合
ID必须具有唯一性
控制范围：id="ID"的标签
案例：
#ID12{color: chocolate;text-decoration: underline;
}
使用： <p id="ID12">···</p>
4、嵌套选择器
格式：div p{css语句···}
控制范围：<div>元素里的<p>元素
案例：
CSS代码：
<style type="text/css">div p{color: red;font-size: 20px;}
</style>
HTML代码：
<body><p>学习时间：2019/5/11</p><div id="div1"><p>作者：Mr.C</p><h1>嵌套关系（element element）</h1><p>示例：div p</p><p>说明：<div>元素里的<p>元素</p></div><p>学习完嵌套关系（element element）了</p>
</body>
运行效果：
5、父子关系
格式：div>p{css语句···}
控制范围：所有父级是<div>元素的<p>标签
案例：
CSS代码：
<style type="text/css">div>p{color: red;font-size: 20px;}
</style>
HTML代码：
<body><p>学习时间：2019/5/11</p><div><p>作者：Mr.C</p><h1>父子关系（element>element）</h1><p>示例：div>p</p><p>说明：所有父级是<div>元素的<p>元素</p></div><p>学习完父子关系（element>element）了</p>
</body>
运行效果
6、并列关系
格式：div+p{css语句···}
控制范围：选择所有<div>元素之后紧挨着的<p>元素（</div>之后紧挨的<p>）
案例：
CSS代码：
<style type="text/css">div+p{color: red;font-size: 20px;}
</style>
HTML代码：
<body><h1>CSS选择器学习</h1><p>学习时间：2019/5/11</p><div ><p>作者：Mr.C</p><h1>并列关系（element+element）</h1><p>示例：div+p</p><p>说明：选择所有<div>元素之后紧挨着的<p>元素</p></div><p>学习完并列关系（element+element）了</p>
</body>
运行效果
7、属性选择器
格式：[target]{css语句···}
控制范围：选择所有带有target属性的元素
案例：
CSS代码：
<style type="text/css">[target]{color: red;font-size: 20px;}
</style>
HTML代码：
<body><h1>CSS选择器学习</h1><p><a href="#" target="_self">学习时间：2019/5/11</a></p><div><p><a href="#" target="_blank">作者：Mr.C</a></p><h1>属性选择器[attribute]</h1><p>示例：[target]</p><p>说明：选择所有带有target属性的元素</div><p><a href="#">学习完属性选择器([attribute])了</a></p>
</body>
运行效果
三、常用（文本、字体、列表、背景、超链接）样式
（一）、常用文本、字体样式
<style type="text/css">#right h1{color: teal;/*文本颜色*/text-align: center;/*文本水平对齐方式*/text-decoration: underline;/*文本修饰（上划线，下划线，中划线等）*/letter-spacing: 30px;/*文本字符间距*/line-height: 40px;/*行高*/height: 40px;/*边框（border）的高度，如果行高等于边框高度则文本垂直居中*/}#right p{font-family: "楷体";/*字体样式，不建议设置*/font-style: initial;/*字体风格（倾斜等等）*/font-size: 25px;/*字体大小*/font-weight: bolder;/*字体粗细*/}
</style>
HTML代码：
<body><div id="left"><h1>书愤</h1><p>早岁哪知世事艰，中原北望气如山。</p><p>楼船雪夜瓜洲渡，铁马秋风大散关。</p><p>塞上长城空自许，镜中衰鬓已先斑。</p><p>出师一表真名世，千载谁堪伯仲间。</p></div><div id="right"><h1>书愤</h1><p>早岁哪知世事艰，中原北望气如山。</p><p>楼船雪夜瓜洲渡，铁马秋风大散关。</p><p>塞上长城空自许，镜中衰鬓已先斑。</p><p>出师一表真名世，千载谁堪伯仲间。</p></div>
</body>
运行效果
（二）、列表样式
CSS代码
<style type="text/css">div{float: left;margin: 25px;border: 1px solid blue;}#right ul li{border: 1px solid cyan;/*显示li标签的边框*/list-style: none;/*除去小圆点*/list-style-image: url(img/icon.bmp);/*使用图片代替小圆点*/}#right ul #li1{list-style-position: inside;/*定义小圆点的位置（在li标签的border内）*/}#right ul #li2{list-style-position: outside;/*定义小圆点的位置（在li标签的border外）*/}
</style>
HTML代码
<body><div id="left"><ul><h1>书愤</h1><li>早岁哪知世事艰，中原北望气如山。</li><li>楼船雪夜瓜洲渡，铁马秋风大散关。</li><li>塞上长城空自许，镜中衰鬓已先斑。</li><li>出师一表真名世，千载谁堪伯仲间。</li></ul></div><div id="right"><ul><h1>书愤</h1><li id="li1">早岁哪知世事艰，中原北望气如山。</li><li id="li1">楼船雪夜瓜洲渡，铁马秋风大散关。</li><li id="li2">塞上长城空自许，镜中衰鬓已先斑。</li><li id="li2">出师一表真名世，千载谁堪伯仲间。</li></ul></div>
</body>
运行效果
（三）、常用背景样式及雪碧图
background-color：背景颜色（也可用background）
background-image:url(...)：背景图片
background-repeat：背景平铺方式（repeat:x与y全平铺；no-repeat:不平铺；repeat-x: 在x轴上平铺 ；repeat-y: 在y轴上平铺）
background-position：背景显示位置
background-position-x : 正数为右移，负数是向左移动
background-position-y : 正数是向下移，负数是向上移动
CSS雪碧图，即CSS Sprite，也有人叫它CSS精灵图，是一种图像拼合技术。该方法是将多个小图标和背景图像合并到一张图片上，然后利用CSS的背景定位来显示需要显示的图片部分。
案例：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>背景样式学习</title><style type="text/css">*{/*清除所有格式*/padding: 0px;margin: 0px;border: 0px;margin: 0px auto;}#div1{/*设置框体宽高，以及边框*/width: 230px;height: 420px;border: 1px solid #F14376;}h1{/*设置大标题格式*/height: 45px;line-height: 45px;/*标题垂直居中*/background-color: #F14376;/*设置标题背景色*/color: #fff; font-size: 16px;text-align: center;/*设置字体样式及居中*/}h2{/*设置二级标题格式*/font-size: 18px;/*设置字体大小*/background-image: url(img/line.jpg);/*二级标题前的红色小竖线图片*/background-repeat: no-repeat;/*设置图片不平铺*/background-position: 8px;/*向右移动8px，向下移动8px图片到合适位置*/padding-left: 18px;/*移动文字，以免覆盖图片*/}li{/*设置列表项格式，雪碧图应用*/list-style: none;/*清除小图标，准备用图片代替*/background: url(img/hot.jpg) no-repeat 0px 5px;/*设置背景图，不平铺，右移0px，下移5px*/height: 40px;line-height: 40px;/*设置文本垂直居中*/padding-left: 26px;/*设置字体右移动26px，不要和图片重叠*/}/*下面是为每个列表项设置图标，雪碧图应用，一张图片，可以显示4个图标*/#icon2{background-position-y: -28px;}#icon3{background-position-y: -62px;}#icon4{background-position-y: -95px;}/*超链接样式*/a{font-size: 15px;text-decoration: none;}</style></head><body><div id="div1"><h1>优惠商品分类</h1><h2>热门分类</h2><ul><li><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li><li id="icon2"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li><li id="icon3"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li><li id="icon4"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li></ul><h2>热门分类</h2><ul><li><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li><li id="icon2"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li><li id="icon3"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li><li id="icon4"><a href="#">女装</a> <a href="#">女装</a> <a href="#">女装</a></li></ul></div></body>
</html>
运行效果
图片资源
（四）、常用超链接样式以及伪类
伪类的格式以及使用
伪类可以实现一下特殊效果，图鼠标悬停，链接字体变色，放大等。
在上面（三）、背景样式的使用中的CSS代码末尾添加以下代码即可实现这些效果
a:link{color: black}/*链接默认时候的样式*/
a:active{color: cyan;}/*链接按住不放时的样式*/
a:hover{color: blue;font-size: 150%;}/*鼠标悬停时的样式*/
a:visited{color: green;}/*链接被点击后的样式*/
运行效果
Web学习第四天——CSS简介、选择器，常用（文本、字体、列表、背景、超链接）样式相关推荐
- Web学习（二）CSS
Web学习(二)CSS 小技巧:ctrl+shift+c:快速查看网页元素信息 qq截图取色:ctrl+alt+a截图,然后鼠标在所选颜色区域按下ctrl+c即可取得色号的16进制色号 1.样式定义方 ...
- CSS复合选择器、元素显示模式、背景
[CSS复合选择器.元素显示模式.背景] 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选择器的类型把选择器分为:基础选择器 和 复合选择器,复合选择器是建立在基础选择器之 ...
- css3-2 CSS3选择器和文本字体样式
css3-2 CSS3选择器和文本字体样式 一.总结 一句话总结:是要记下来的,记下来可以省很多事. 1.css的基本选择器中的:first-letter和:first-line是什么意思? :f ...
- [css] css中最常用的字体有哪些？你是怎么选择字体的？
[css] css中最常用的字体有哪些?你是怎么选择字体的? 总结: win:微软雅黑为Win平台上最值得选择的中文字体,但非浏览器默认,需要设置:西文字体的选择以Arial.Tahoma等无衬线字体 ...
- java 字体选择器_常见CSS3选择器和文本字体样式汇总
常见的CSS3选择器包含:常用基本.属性.伪类.层级(组合)选择器,具体使用情况建议先阅读 常用的选择器有:标签.id.类.关联(通过父集找到子集)组合选择器,注意html页面中id是唯一的:基本选择 ...
- html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
- 前端-CSS文本字体与背景样式
CSS文本字体与背景样式 1. 字体样式 **字体大小:**font-size: px / % / em / rem; 设置的是字体的高度 单位: px 像素 相对于显示屏分辨率而言的,浏览器默认的字 ...
- css层叠样式表基础学习笔记--第一章 css简介及引入
第一章 css简介及引入 1-01 css简介 1-02 css优缺点 1-03 css书写格式 1-04 css引入格式 行内样式 内部样式 外部样式 导入样式 1-05 css注释 1-01 cs ...
- html学习（标签、css、选择器）
认识HTML HTML是HyperText Markup Language的缩写,中文名为超文本标记语言.它是一种用来创建网页的标准标记语言,由标签(tag)和文本构成,用于描述网页的结构和内容.HT ...
最新文章
- flexbox布局_这是您可以使用FlexBox制作的5种布局
- RK3288 make otapackage 出错的问题【转】
- 信号源的ALC环路介绍
- Android 6.0 Changes
- ftp服务用户访问权限设置
- Python 语法错误：“SyntaxError: invalid character in identifier“，原因及解决方法
- jquery ajax 滚动加载数据
- 环境变量_配置JAVA环境变量
- C#用Zlib压缩或解压缩字节数组
- 你初吻啥时候没有的？
- LeetCode 1073. 负二进制数相加（负数进制）
- 携程赴港二次上市在即 “旅游营销枢纽”战略助价值重估
- Android应用开发（10）---资源类型
- 翁恺老师C语言学习笔记（十）指针_指针变量就是记录地址的变量
- maya显示已安装_【3D建模】Maya操作秘籍83招（一）
- 一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮
- Ubuntu 手动更新firefox的flash插件
- python 上传文件到服务器（模拟网页前端上传）
- qunee for html5,Qunee for HTML5（一）
- 安卓APK文件结构解析 怎样去除内置广告 及修改图标和文字