选择器、像素和百分比、颜色单位、文档流-css基础
网页分成三部分:
结构(HTML)
表现(CSS)
行为(JavaScript)
CSS:
- css是层叠样式表
- 网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式。(是一种3D效果)CSS用来设置网页中元素的样式
使用CSS来修改元素的样式
第一种方式(内联样式,行内样式):
在标签内部通过style属性来设置元素的样式
<p style="color: red; font-size: 30px;">易烊千玺 加油!!!</p>
问题:
使用内联样式,样式只能对一个标签。如果希望影响到每个元素必须在每一个元素中都复制一遍
注意:在开发时绝对不要使用内联样式(因为该种方法将HTML和CSS的混在一起使用,不好维护)
第二种方式(内部样式表)
- 将样式编写到head中的style标签里
- 然后通过css的选择器来选中元素并为其设置各种样式
- 可以同时为多个标签设置样式,并且修改时只需要修改一处即可
- 内部样式表更加方便对样式进行复用
- 问题:
- 我们的内部样式表只能对一个网页起作用
他里面的样式不能跨页面进行复用
<head><meta charset="UTF-8"><title>Document</title><style>p{color: seagreen;font-size: 50px; </style>
</head>
第三种方式(外部样式表)
- 可以将css样式编写到一个外部的css文件中
- 然后将通过link标签来引入外部的css文件
- 外部样式表需要通过link标签进行引入
- 意味着只要想使用这些样式的网页都可以对其进行引用
- 使样式可以在不同的页面之间进行复用
- 将样式编写到外部的css文件中,可以使用到浏览器的缓存机制
- 从而加快网页的加载速度,提高用户的体验
style.css
p{color: brown; font-size: 50px;
}<head><meta charset="UTF-8"> <title>Document</title><link rel="stylesheet" href="./img/style.css">
</head>
CSS的基础语法
style框里遵循css语法
CSS的注释/* css中的注释*/。在style中直接ctrl+/(注释快捷键)
CSS基本语法:选择器;声明块
- 选择器 :通过选择器可以选中页面中的指定元素(比如p 的作用就是选中页面中所有的p元素)
- 声明块:通过声明块来指定要为元素设置的样式(声明块由一个一个的声明组成、声明是一个名值对结构—一个样式名对应一个样式值,名和值之间以 : 连接,以 ; 结尾
选择器
id选择器:
- 作用:根据元素的id属性值选中一个元素
- 语法:#id属性值()
- 例子:#red()、#box()
类选择器:
- 作用:根据元素的class属性值选中一组元素
- 语法:.class属性值
- .blue{
color:blue;
} - class是一个标签属性,它和id类似,不同的是class可以重复使用(可以使用class属性来为元素分组)
通配选择器:
- 作用:选中页面中的所有元素
- 语法:*
交集选择器:
作用:选中同时符合多个条件的元素
语法;选择器1选择器2选择器3选择器n{ }
注意:交集选择器如果有元素选择器,必须使用元素选择器开头
<style>.red{color: cadetblue;}div.red{font-size: 60px;}</style>
选择器分组(并集选择器):
作用:同时选择多个选择器对应的元素
语法:选择器1,选择器2,选择器3,选择器n{ }
<style>div,h1{color: chocolate;}</style>
子元素选择器:
作用:选中指定元素的指定子元素
语法:父元素>子元素
<head><meta charset="UTF-8"><title>Document</title><style>div>p{color: chocolate;}p>span{color:darkcyan}</style>
<body><div>我是一个div标签<p>我是div里的p标签<span>我是div——p标签里的span标签</span></p><span>我是div中的span标签</span></div>
</body>
后代元素选择器:
作用:选中指定元素内的指定后代元素
语法:祖先 后代
<style>div span{color: deeppink;}
</style>
div>p>span{color: deeppink;}
<style>p + span{color: red; }
</style>
<style>p ~ span{ color: red; }
</style>
属性选择器:
[属性名]选择含有指定属性的元素
[属性名=属性值]选择含有指定属性和属性值的元素
[属性名^=属性值]选择属性值以指定值开头的元素
[属性名$=属性值]选择属性值以指定值结尾的元素
[属性名*=属性值]选择属性值中含有某值的元素的元素
<head><meta charset="UTF-8"><title>Document</title><style>p[title]{color: cornflowerblue;}p[title=abc]{font-size: 50px;}p[title*=]{}p[title$=d]{color: darkkhaki;}</style>
<body><p title="abc">少小离家老大回</p><p title="abcd">乡音无改鬓毛衰</p><p title="abcde">儿童相见不相识</p><p>笑问客从何处来</p>
</body>
伪类选择器:
<head><meta charset="UTF-8"><title>Document</title><style>ul>li{color: green;/* 所有都变色 */}/* 将ul里的第一个li设置成红色 伪类:(不存在的类,特殊的类)伪类用来描述一个元素的特殊状态比如:第一个元素,被点击的元素,鼠标移入的元素···伪类一般情况下都是使用:开头:first-child第一个子元素:last-child最后一个元素:nth-child() 选中第n个元素特殊值:2n(或even):表示选中偶数的元素2n+1(或add):表示选中奇数的元素以上这些伪类都是根据所有的子元素进行排序:first-of-type:last-of-type:nth-of-type()这几个伪类的功能和上述的类似不同点是他们是在同类型元素中进行排序:not()否定伪类将符合条件的元素从选择器中去除*/ul>li:first-child{color: red;}ul>li:nth-child(2n){color: yellowgreen;}ul>li:not(:nth-of-type(2)){color: violet;}</style>
<body><!-- ul>li按Tab建 --><!-- ul>li*5按Tab建 --><ul><li>第一个</li><li>第二个</li><li>第三个</li><li>第四个</li><li>第五个</li></ul>
</body>
超链接的伪类
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=a, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/*:link用来表示没访问过的链接(正常的链接(无论是否访问过,只要链接正常都是正常的链接) */a:link{color: red}/* :visited用来表示访问过的链接由于隐私的原因,所以:visited只能修改颜色,改不了大小*/a:visited{color: orange;}/* :hover 用来表示鼠标移入的状态*/a:hover{color: brown;}/*:active 用来表示鼠标点击*/a:active{color: darkgreen;}</style>
</head>
<body><a href="https://www.baidu.com">访问过的链接</a><br><br><a href="https://www.jd.com">没有访问过的链接</a>
</body>
</html>
伪元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>p{font-size: 30px;}/* p>span{font-size: 50px;} *//* 伪元素:表示页面中一些特殊的并不真实的存在的元素(特殊的位置)伪元素用 ::开头::first-letter表示第一个字母::first-line表示第一行::selection表示选中的内容::before元素的开始::after元素的最后before和after必须结合content属性来使用*/p::first-letter{font-size: 50px;}p::first-line{color: yellowgreen;}p::selection{background-color: wheat;}div::before{content: '妖魔鬼怪快离开';color: red;}</style>
</head>
<body><div>这是一个div</div><p><!-- <span>I</span> s a journey, not the destination, but the scenery along the should be and the mood at the view. -->It is a journey, not the destination, but the scenery along the should be and the mood at the view.</p>
</body>
</html>
选择器的权重
样式的冲突:
- 当我们通过不同的选择器,选中相同的元素,并且为相同的样式设置不同的值时,此时就发生了样式的冲突
- 样式冲突时,应用哪个样式由选择器的权重(优先级)决定
选择器的权重:
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承的样式 没有优先级 - 比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示(分组选择器时单独计算)
- 选择器的累加不会超过其最大的数量级,类选择器再高也不会超过id选择器
- 如果优先级计算后相同,此时则优先使用靠下的样式
- 可以在某一个样式的后边添加!important,则此时该样式会获取到最高的优先级,甚至超过内联样式
.red{color: red;!important}
important能不用就不用
像素和百分比
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{/* 长度单位像素- 屏幕(显示器)实际上是由一个个小点点构成的- 不同的屏幕的像素大小是不同的,像素越小的屏幕显示的效果越清晰- 所以同样的200px在不同的设备下显示是不一样的- 200px就是200个点百分比- 可以将属性值设置为相对于其父元素属性的百分比em- em是相对于元素的字体大小来计算的- 1em=1font-size- em会根据字体大小的改变而改变rem- rem是相对于根元素的字体大小而改变的*/width: 200px;height: 200px;background-color: yellowgreen;}.box2{width: 50%;height: 50%;background-color: wheat;}.box3{width: 10em;height: 10em;background-color: violet;}</style>
</head>
<body><div class="box1"><div class="box2"></div></div><div class="box3"></div>
</body>
</html>
颜色单位
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box1{width: 100px;height: 100px;/* 颜色单位在css中可以直接使用颜色名来设置各种颜色例如:red,brown,yellow···RGB值:光的三原色- RGB通过三种颜色的不同来调配出不同的颜色- R:red G:green B:blue- 每一种颜色的范围在0-255(0-100%)之间- 语法:rgb(红色,绿色,蓝色)RGBA:- 在RGB的基础上增加了一个a表示不透明度- 需要四个值,前三个和RGB一样,第四个表示不透明度1表示完全不透明 0表示完全透明 0.5半透明十六进制的RGB值- 语法:#红色绿色蓝色- 颜色浓度通过 00-ff- 如果颜色两位两位重复可以进行简写#aabbcc-->#abcHSL值 HSLA值H:色相(0-360)S:饱和度,颜色的浓度(0%-100%)L:颜色的亮度(0%-100%)*/background-color: aqua;background-color: rgb(100, 120, 130);background-color: #ff0000;background-color: #abc; }</style>
</head>
<body><div class="box1"></div>
</body>
</html>
文档流
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body><!-- 文档流- 网页是一个多层的结构,一层摞着一层- 通过css可以分别为每一层来设置样式- 作为用户我们只能看到最上面的一层- 这些层中,最底下的一层我们称为文档流,文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列- 对于咱们来说元素主要有以下两种状态在文档流中不在文档流中(脱离文档流)- 元素在文档流中有什么特点- 块元素-块元素会在页面中独占一行(自上向下垂直排列)- 默认宽度是父元素的全部(会把父元素撑满)- 默认高度是被内容撑开(子元素)- 行内元素- 行内元素不会独占页面的一行,只占自身的大小- 行内元素在页面中由左向右水平排列,如果一行之中不能容纳所有的行内元素则元素会换到第二行继续自左向右排列- 行内元素的默认宽度和高度都是被内容撑开--><div>我是div1</div><div>我是div2</div></body>
</html>
选择器、像素和百分比、颜色单位、文档流-css基础相关推荐
- html 浮动脱离文档流,CSS标准文档流与脱离文档流
标准文档流 文档流:指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式.并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素. 标准流的微观现象: 空白折叠现象: 在 ...
- html选择器与文档流基本介绍
html选择器与文档流 [任务一]什么是html,它有哪些部分组成,每个部分之间的关系是什么? [任务二]选择器有哪些?选择的权重? [任务三]文档流:块元素与行内元素 HTML 是用来描述网页的一种 ...
- python 全栈开发,Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)...
昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active属性选择器: [属性~='属性值'] 伪类选择器 a ...
- HTML05——行内块级元素_文档流_font属性_盒子模型_练习
目录 行内块级元素 文档流 font属性 文本段落 文字属性 盒子模型 概念和属性 常见问题 块元素和行元素的相互转换 display属性 overflow属性 边框.宽度与高度 浮动float 练习 ...
- 继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素...
内容总结: 1.继承性和层叠性继承性: 像 一些文本的属性: color,text-*,line-*,font-* 这些属性是可以继承下来的2.层叠性就是权重 ,谁的权重大就显示谁的属性如何看权重:就 ...
- 脱离文档流的方法CSS浮动产生的负面影响及解决办法
https://blog.csdn.net/theLostLamb/article/details/79581984 一.什么是文档流? 将窗体自上而下分成一行一行,并在每行中按从左至右依次排放元素, ...
- 05-CSS 权重 盒模型 标准文档流 浮动
一.权重问题 1.1. !important 标记 可以通过 k : v !important 来给一个属性提高权重,这个属性的权重是无穷大的. <style>.spac2{color: ...
- CSS标准文档流,在线面试指南
前言 过完年了,准备实习的你是已经在实习了,还是已经辞职回家过年,准备年后重新找工作呢,又或者是准备2021年春招? 那么还没没踏出校门或者是刚出校门没多久的同学们该如何准备前端校招的面试呢? 面试知 ...
- web前端开发自学课程,CSS标准文档流,超详细
前言 又逢金三银四,拿到大厂的offer一直是程序员朋友的一个目标,我是如何拿到大厂offer的呢,今天给大家分享我拿到大厂offer的利器,前端核心知识面试宝典,内容囊括Html.CSS.Javas ...
最新文章
- ClickHouse系列教程二:使用航班飞行数据
- 写个Vue小组件,图片滚动
- Pytorch网络结构可视化
- NorthWest University - Medical Engineering
- 从PHP5.2.x迁移到PHP5.3.x
- C和指针之IO流和缓冲区
- 【渝粤题库】陕西师范大学164117 企业组网技术 作业 (高起专)
- 快速入门Matplotlib
- 对话亲历者|鲁肃:我在支付宝“拧螺丝“的日子
- Windows 10环境下「MSCOCO Captions」评估代码踩坑记录
- 学习总结——接口测试基础
- c++冒泡排序的类模板的实现
- 【软考】系统集成项目管理工程师(五)项目立项管理
- python图灵机器人教程_Python-微信图灵机器人
- 增加关键词密度不要堆积
- Wangle源码分析:编解码Handler
- echarts 使用 百度地图 加入自定义图标标记
- 【2015NOIP普及组】T4:推销员 试题解析
- ffmpeg 视频抽取音频,音频分离 方法大全 你长知识了吗?
- SAP WM 上架策略R的几个幺蛾子