前端基础之CSS_1
阅读目录
摘要
- CSS(层叠样式表)的三种设置方法
- 基本选择器
- 组合选择器
- 属性选择器
- 分组与嵌套
- 伪类选择器
- 伪元素选择器
- 选择器的优先级
- 一些样式的设置(字体、文本、背景、边框)
- display属性设置
01.CSS(层叠样式表)的三种设置方法
- CSS又名层叠样式表,它的作用就是给HTML网页进一步装饰,前面我们学习HTML结构的时候其实就是学习了HTML的一个大的骨架结构,后面学习的表form表单展现的形式是很low的,需要进一步对齐修饰设置,让它变得更高大上起来,这就离不开CSS的知识。
层叠样式表(英文全称:Cascading Style
Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。 - 语法结构:选择器 {属性: 属性值;属性: 属性值}
- 注释形式:/这是注释内容/
/*多行注释内容1
多行注释内容2
*/ - 三种设置方法: head里面style中写css:
head里面link引入css文件:
在标签内直接指定style:hello world!
我们在设置不同种类标签内容的样式的时候,需要知道我们修改的标签的位置,接下来看看如何精确定位设置样式的位置,才能设置其样式。
02.基本选择器
标签通常同的属性有:id和class类
- 标签选择器:根据标签种类来设置该类标签样式
- id选择器:每个标签都可以设置一个id在唯一标识它,所以我们可以通过这个id来定位到该标签位置,从而进行修改样式操作,id前面注意要加上#
- 类选择器:在标签里面设置class=“c1”,c1是一个类的设置样式,在style里定义的时候前面需要加点(.c1
{color:red}) - 通用选择器:类似这种* {color: blue},*代表所有标签,意思就是所有都全部设置
--------------------------------------------------------------------注:如果你对python感兴趣,我这有个学习Python基地,里面有很多学习资料,感兴趣的+Q群:895817687
--------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>CSS学习测试</title><style>p {color: gold}.c1 {color: mediumturquoise}#p1 {color: blue}* {color: red}</style>
</head>
<body>
<p>我要记住你的样子</p>
<div>像鱼记住水的拥抱</div>
<span>像云在天空中停靠</span>
<h3 class="c1">夜晚的来到</h3>
<p id="p1">也不会忘了阳光的温暖</p>
</body>
(涉及查找优先级的问题,在后面会谈及。)
03.组合选择器(span套span,不符合html5规则)
后代选择器==>div span:div里面所有的span
<div>01我要忘了你的样子<br><span>02像鱼忘了海的味道<br><span>03放下所有梦和烦恼</span></span>
</div>
- 儿子选择器==>div>span:div里面儿子一层(第一层)所有的span
<style>div>span {color: deeppink}</style><div>主div<div>主div的儿子1<span>主div的孙子1</span></div><p>主div的儿子2<span>主div的孙子2</span></p>
</div>
- 毗邻选择器==>div+span:div下面挨着的span
<style>div+span {color: deeppink}
</style><div>主div<p>主div的儿子2<span>主div的孙子2</span></p>
</div>
<span>div下面的第一个span</span>
<span>div下面的第二个span</span>
- 弟弟选择器==>div~span:与div同一级且下面所有的标签
<style>div~span {color: deeppink}</style><div>主div<p>主div的儿子2<span>主div的孙子2</span></p>
</div>
<span>div下面的第一个span</span>
<span>div下面的第二个span</span>
04.属性选择器
在标签内自定义一个属性,用于找到该标签的作用。
<style>[xxx] {color: deeppink}</style><p xxx>自定义属性xxx</p>
<p xxx="1">自定义属性+值1</p>
<p xxx="2">自定义属性+值2</p>
<p id="xxx">我是打酱油的!</p>
<style>[xxx='1'] {color: deeppink}</style><p xxx>自定义属性xxx</p>
<p xxx="1">自定义属性+值1</p>
<p xxx="2">自定义属性+值2</p>
<p id="xxx">我是打酱油的!</p>
<style>[xxx='2'] {color: deeppink}</style><span xxx="2">我是span,我的属性里有xxx</span>
<p xxx>自定义属性xxx</p>
<p xxx="1">自定义属性+值1</p>
<p xxx="2">自定义属性+值2</p>
<p id="xxx">我是打酱油的!</p>
05.分组与嵌套
分组:
<style>div,p,span {color: red}
</style><div>我是div</div>
<p>我是一个p</p>
<span>我是span</span>
- 嵌套:
<style>div p,span {color: red}
</style><div>我是div<p>我是div里面的一个p</p><span>我是div里面的span</span>
</div>
<p>我是一个p</p>
<span>我是span</span>
div p嵌套关系,然后div和span是组合关系,所以:
06.伪类选择器
a标签的四种状态:
<style>a {text-decoration: none} /*去掉下划线*/a:link {color: green} /*链接什么都不干的时候颜色*/a:hover {color: red} /*鼠标放在链接上面不做任何动作时候变的颜色*/a:active {color: blue} /*鼠标点击链接时候,链接的颜色*/a:visited {color: gray} /*当这个链接已经点击过,将变成的颜色*/</style><p><a href="#我是下面" id="我是上面">点我跳到下面</a></p>
<p><a href="http://www.t66y.com" target="_blank">点我开启新的人生篇章(爬梯吧)</a></p>
<p><a href="http://www.baidu.com" target="_blank">百度一下</a></p>
<p><a href="#我是上面" id="我是下面">点我跳到上面</a></p>
- 获取焦点:让输入框在选中时候,背景颜色变成自定义颜色
<style>input:focus {background-color: yellow}</style><form action=""><label for="a1">用户: <input type="text" id="a1" name="username"></label><label for="a2">用户: <input type="password" id="a2" name="password"></label><input type="submit">
</form>
07.伪元素选择器
伪元素选择器:将某一标签的第一个,开头、结尾处设置样式。 first-letter
<style>p:first-letter {color: red;font-size: 24px}</style><p>我闻西方大士,</p>
<p>为人了却凡心。</p>
<p>秋来明月照蓬门,</p>
<p>香满禅房幽径。</p>
<p>屈指灵山会后,</p>
<p>居然紫竹成林。</p>
<p>童男童女拜观音,</p>
<p>仆仆何嫌荣顿?</p>
- before:
<style>p:before {content: '△';color: red;font-size: 24px}</style><p>万物由道而生,循着道成长,而后又回归于道。</p>
<p>人可以毁灭,但不可以屈服。</p>
<p>你要克服的是你的虚荣心,是你的炫耀 欲,你要对付的是时时刻刻想出风头的小聪明。</p>
after:
<style>p:after {content: '☆';color: red;font-size: 24px}</style><p>包租婆,怎么就没有水了呢</p>
<p>维护世界和平就靠你了,我这里有本秘籍,见与你有缘,就十块钱卖给你了.</p>
08.选择器的优先级
相同选择器,不同的引入方式:就近原则(从上往下生效),看哪个style里标签更近。
不同选择器,不同引入方式:行内样式>id选择器>类选择器>标签选择器
09.一些样式的设置(字体、文本、背景、边框)
块儿级标签的宽度和长度:
<style>div {width: 800px; height: 100px;background-color: mediumspringgreen}</style><div>樊登读书,改变你我</div>
- 字体相关设置(大小、自重、颜色):
<style>p {font-size: 24px;font-weight: lighter;color: #FF6700;/*color: rgb(0,0,255);*//*color: rgba(0,0,255,0.2)} 最后的0.2是透明度(0-1之间)*/</style><p>面朝大海,春暖花开</p>
- 文本属性:(通常给a标签用)
<style>p {text-align: center;text-decoration: line-through}</style><p>浪花一朵朵</p>
<p>桃花朵朵开</p>
去掉跳转文字的下划线:
<style>a {text-decoration: none}</style><a href="http://www.baidu.com">百度一下</a>
<a href="http://www.google.com">谷歌一下</a>
背景属性:
<style>.c1 {height: 200px;background: url("20190529[21-04].png") blue no-repeat center;}.c2 {height: 200px;background-color: tomato}.c3 {height: 200px;background-color: yellow}.c4 {height: 200px;background-color: greenyellow}</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
边框:
<style>div {border: 1px dashed red}</style><div>我是一条鱼</div>
- 画圆:
<style>div {width: 400px;height: 400px;background-color: red;border: 2px dashed black;border-radius: 50%;}</style><div></div>
10.display属性设置(设置不显示,不会继续占用位置)
display:none
<style>[xxx] {display: none} /*设为none代表含xxx属性标签的内容都不显示,且不再占用原位置</style><div>开头1</div>
<div xxx>看我显示没有1</div>
<div xxx>看我显示没有1</div>
<div>结尾2</div>
- display:inline 将块级标签变成行内标签
<style>div {height: 300px;width: 200px;background-color: aquamarine;display: inline;}</style><div>天天</div>
<div>年年</div>
- display:block 将行内标签变成块级标签
<style>span {display: block}</style><span>美好的事情</span>
<span>即将到来</span>
- display :inline-block 让span标签具有独占一行且可以设置长宽
<style>span {width: 120px;height: 400px;background-color: bisque;border: 2px solid red;display: inline-block;}</style><span>第一个span</span>
<span>第二个span</span>
前端基础之CSS_1相关推荐
- html表格联动,html前端基础:table和select操作
html前端基础:table和select操作 发布时间:2020-05-13 09:58:10 来源:亿速云 阅读:196 作者:Leah 这篇文章主要为大家详细介绍html前端基础中有关table ...
- element ui 图片控件 排序_JAVA全栈面试前端基础之四 Vue+Element框架快速开发
本文主要包括以下4个内容 什么是ElementUI Vue 中引入ElementUI Vue+elementUI构建后台管理系统 开源项目推荐 1.什么是ElementUI 官网:https://el ...
- boost log 能不能循环覆盖_前端基础进阶(十四):深入核心,详解事件循环机制...
Event Loop JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了.为了解决自己的这个困扰,在学习的过程中,我一直在试图 ...
- gif透明背景动画_前端基础系列之bmp、jpg、png、gif、svg常用图片格式浅谈(二)...
IT客栈 作者:大腰子 bmp.jpg.png.gif.svg常用图片格式 之前为大家介绍了几种WEB前端常用的图片格式,对比了它们的特点,参见<前端基础系列之bmp.jpg.png.gif.s ...
- 前端基础知识整理汇总(中)
前端基础知识整理汇总(中) Call, bind, apply实现 // call Function.prototype.myCall = function (context) {context = ...
- 前端基础知识整理汇总(上)
前端基础知识整理汇总(上) HTML页面的生命周期 HTML页面的生命周期有以下三个重要事件: 1.DOMContentLoaded -- 浏览器已经完全加载了 HTML,DOM 树已经构建完毕,但是 ...
- jquery function_前端基础进阶(十三)详细图解jQuery扩展jQuery插件
UI 鉴赏 早几年学习前端,大家都非常热衷于研究jQuery源码. 我至今还记得当初从jQuery源码中学到一星半点应用技巧的时候常会有一种发自内心的惊叹,"原来JavaScript居然可以 ...
- 前端基础-HTML的的标签详解
阅读目录 一.head内常用标签 二. HTML语义化 三. 字符实体 四. h系列标签 五. p标签 六. img标签 七. a标签 八. 列表标签 九. table标签 十. form标签 一. ...
- 前端基础-CSS的各种选择器的特点以及CSS的三大特性
一. 基本选择器 二. 后代选择器.子元素选择器 三. 兄弟选择器 四. 交集选择器与并集选择器 五. 序列选择器 六. 属性选择器 七. 伪类选择器 八. 伪元素选择器 九. CSS三大特性 一. ...
最新文章
- 远程服务器如何创建分支,git如何远程创建分支
- springCloud - 第1篇 - 服务的注册 Eureka
- 任正非:感谢美国,帮我把华为给全世界都宣传了
- 【Java】辨析JUnit4中的@AfterClass、@BeforeClass、@after、@before
- Mysql解压版配置环境等
- Objective-C 和 Core Foundation 对象相互转换的内存管理总结
- onenote插入代码块的完美解决方法
- [Java]批量生成二维码
- 共享单车项目(一)--项目简介
- [收藏]家用三线插座(220V单相)正确接线方法
- gtx1660是什么级别的_GTX1660Ti和1660区别对比 GTX1660和1660Ti差距大吗
- 懒得刷牙?微型机器人自动帮你搞定,还能牙刷牙线随时变换
- 【今日CV 计算机视觉论文速览 第94期】 4 Apr 2019
- Linux网络之DHCP
- Linux运维工程师学习大纲
- 南充市浏览器市场份额
- rts游戏服务器源码,unity即时战略游戏引擎RTS Engine 1.2.0 源码
- 《转》OpenWRT的Feeds分析学习
- 2020cs线上保研之路 清华北大交大复旦自动化所计算所
- 邯郸翱翔闹元宵开学活动
热门文章
- Struts2封装获取表单数据方式
- Visual C++——黄维通《 Visual C++面向对象与可视化程序设计》——例题9-3
- ACM基础知识及算法
- Spanning Tree with One Fixed Degree
- 计算机考研只有数据结构,【择校必看】十三所计算机专业课只考数据结构的985院校!...
- mysql常用备份指令
- redis+springboot实现购物车+商品数据修改实例
- Paxos算法与Zookeeper分析
- 多硬盘的引导文件boot.ini
- token在浏览器和服务端接收和发送