前端开发笔记(2)css基础(上)
CSS介绍
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。
<style type="text/css">span{color:red;font-size:14px;}
</style>
<body><span>css介绍</span>
</body>
上面就是一个典型的css样式,给span标签中的文本添加样式。
在我们学习css之前先来思考一个问题,为什么html标签上不直接改变样式,而要将文档结构和样式分离,分别用html和css来表示呢?
其实这样分离带来的好处显而易见,我总结了几点:
1. 可以实现样式重用,提高了工作效率。
2. 可以更加细致的分工开发。
3. 使文件结构更加清晰。
CSS常见的属性
字符颜色 color:red;
字号大小 font-size:40px;
背景颜色 background-color:blue;
加粗 font-weight:bold;
不加粗 font-weight:normal;
斜体 font-style:italic;
不斜体 font-style:normal;
下划线 text-decoration:underline;
没有下划线 text-decoration:normal;
基础选择器
标签选择器
<style>
div{width:200px;height:200px;border:1px solid red;
}
</style>
<body><div> </div>
</body>
浏览器显示结果:
id选择器
<style>#outdiv{width:200px;height:200px;background-color:green;}
</style>
<body><div id="outdiv"></div>
</body>
浏览器显示结果:
类选择器
<style type="text/css">div{border:1px solid red;}span{margin-left: 20px;border:1px solid blue;}.padding50{padding: 50px;}.floatleft{float:left;}
</style>
<body><div class="padding50 floatleft"></div><span class="padding50 floatleft">类选择器</span>
</body>
浏览器显示结果:
后迭代选择器
特点:向后面迭代选择(向子标签)
<style type="text/css">.outdiv span{color:red;}
</style>
<body><div class="outdiv"><div><span>子标签(孙子)</span></div></div>
</body>
交集选择器
交集选择器一般是以标签选择开头,类选择器结尾
<style type="text/css">div span.redspan{color:red;}
</style>
<body><div><span>span1</span><span class="redspan">sapn2</span><span>span3</span></div>
</body>
并集选择器
<style type="text/css">li,span{color:red;}
</style>
<body><ul><li>item1</li><li>item2</li><li>item3</li></ul><span>span</span>
</body>
通配符选择器
通配符使用星号*表示,意思是“所有的”。
*{padding:0;margin:0;
}
这里是设置所有元素的外边距margin和内边距padding都为0。
不过,由于*会匹配所有的元素,这样会影响网页渲染的时间,因此很多人开始停止使用*通配符选择器,取而代之的是,把所有需要统一设置的元素,放在一起,一块设置。
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{ margin:0;padding:0}
CSS的继承性和层叠性
继承性
有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。
哪些属性能继承?
color、 text-开头的、line-开头的、font-开头的。
所以,如果我们的页面的文字,都是灰色,都是14px。那么就可以利用继承性:
body{color:gray;font-size:14px;
}
层叠性
CSS层叠性是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。每个CSS选择器都会有一个权重,当两个选择器同时配置同一元素的同一属性时(比如一个设置color:red,另一个color:black),就会产生冲突,而解决冲突的方案就是CSS选择器的权重,权重高的来覆盖权重低的。
层叠权重规则:
先看标签有没有被选中,如果选中了以id数、类数、标签数来计算权重,如果权重一样大,style样式表后面的样式覆盖前面的。
如果都没有选中,权重都是0,样式就近原则。
为了说明这个权重规则我们下面以几个案例来解释一下:
案例1–看有没有选中
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/* 样式1 */#div1 #div2{ /* 权重 2 0 0 */color:red;}/* 样式2 */.outdiv div span{ /* 权重 1 0 2 */color:blue;}</style>
</head>
<body><div class="outdiv" id="div1"><div class="innerdiv" id="div2"><span>层叠规则<span></div></div>
</body>
本案例中样式1的权重明显比样式2大,但是样式2直接选中了标签。所以如果只有一个样式直接选中标签就不用比较了。
案例2–同时选中比权重
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/* 样式1 */#div1 .innerdiv span{ /* 权重 1 1 1 */color:red;}/* 样式2 */.outdiv .innerdiv span{ /* 权重 0 2 1*/color:blue;}</style>
</head>
<body><div class="outdiv" id="div1"><div class="innerdiv" id="div2"><span>层叠规则<span></div></div>
</body>
该例中样式1和样式2都直接选中了span标签,所以需要比较权重。
案例3–权重一样看谁在后面
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/* 样式1 */#div1 .innerdiv span{ /* 权重 1 1 1 */color:red;}/* 样式2 */.outdiv #div2 span{ /* 权重 1 1 1 */color:blue;}</style>
</head>
<body><div class="outdiv" id="div1"><div class="innerdiv" id="div2"><span>层叠规则<span></div></div>
</body>
上面样式1和样式2的权重一样大,样式2在后面所以显示蓝色。
案例4—都没选中看谁近
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">/* 样式1 */#div1 #div2 { /* 权重 2 0 0 */color:red;}/* 样式2 */.innerdiv{ /* 权重 0 1 0 */color:blue;}</style>
</head>
<body><div class="outdiv" id="div1"><div class="centerdiv" id="div2"><div class="innerdiv"><span>层叠规则<span><div></div></div>
</body>
上面样式1和样式2都没有选中span标签,虽然样式1的权重大,但是此时不比较权重,看谁离span标签近,如果一样近才比较权重。
盒模型
一个盒子中主要的属性就5个:width、height、padding、border、margin。
margin控制的是盒子与盒子之间的距离,padding存在于盒子的内部它不涉及与其他盒子之间的关系和相互影响问题。
这个盒子width:200px; height:200px; 但是真实占有的宽高是302*302。 这是因为还要加上padding、border。
宽度和真实占有宽度,不是一个概念!!
真实占有宽度= 左border + 左padding + width + 右padding + 右border
div{padding:30px 20px 40px 100px; /*(上、右、下、左)*/
}
小属性可以叠掉大属性
padding: 20px;
padding-left: 30px; /* 将上面左边padding覆盖 */
边框的大属性写法
border-width:10px; /* 边框宽度 */
border-style:solid; /* 线型 */
border-color:red; /* 颜色。*/border:10px solid red; /* 合在一起的写法 */
标准文档流
标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时,各种元素的排列规则。
几个标准流现象
空白折叠现象
<body><img src="img1.jpg"/><img src="img2.jpg"/>
</body>
如果我们想让img标签之间没有空隙,必须紧密连接,否则会出现一定的空隙。
<img src="data:images/0.jpg" /><img src="data:images/1.jpg" /><img src="data:images/2.jpg" />
底边对齐现象
<body><span>底边对齐现象</span><img src="img3.jpg"/><img src="img2.jpg"/>
</body>
自动换行,一行写不满后就会换行
块级元素和行内元素
HTML文档中的元素可以分为两大类:行内元素和块级元素。
行内元素不占据单独的空间,依附于块级元素,行内元素没有自己的区域。它同样是DOM树中的一个节点,在这一点上行内元素和块级元素是没有区别的。
块级元素总是以块的形式表现出来,并且跟同级的兄弟块依次竖直排列,左右自动伸展,直到包含它的元素的边界,在水平方向不能并排。
常见的块级标签 : <div> 、h系列、<li>、<dt>、<dd>、<p>
常见的行内元素:<span>、<a>、<b>、<i>、<u>、<em>
块级元素和行内元素可以相互转换
display:inline; 和 display:block;
标准流里面有很多限制,往往满足不了我们对前端开发的需求,所以我们实际开发中经常需要脱离标准流限制,下一篇将介绍如何脱离标准流。
转载于:https://www.cnblogs.com/lanzhi/p/6468411.html
前端开发笔记(2)css基础(上)相关推荐
- 〖前端开发〗HTML/CSS基础知识学习笔记
经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构:HTML文件的固定结构:<html><head>...</head><b ...
- 从零开始学习前端开发 — 2、CSS基础
一.CSS简介 1.CSS是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表.特点:实现了表现与结构相分离 2.css基础语法 css是由选择符和声明两大部分组成 ...
- Web前端开发精品课HTML CSS JavaScript基础教程JavaScript部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第24章 JavaScript简介 1.HTML是网页的结构,CSS是网页的外观,而JavaScript是网 ...
- Web前端开发精品课HTML CSS JavaScript基础教程HTML部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第1章 HTML简介 1.前端技术简介 (1)从Web1.0到Web2.0,网页制作已经变成前端开发了. ...
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
- 前端学习笔记之CSS3基础语法与盒模型(二)
前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...
- web前端开发笔记46-71,78-83 2022/11/04
web前端开发笔记 一.标签群组通配等选择器(TAG) 1.标签选择器 2.群组选择器(不同标签) 3.通配选择器(一锅端) 二.层次选择器 - 后代():M N - 父子:M > N - 兄弟 ...
- Web前端开发笔记——第二章 HTML语言 第四节 超链接标签
目录 前言 一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接 二.从当前页面链接到指定位置 三.链接的访问情况 四.在新窗口中打开链接 例题 结语 前言 本节介绍超链接标签即 ...
- 做好前端的话HTML和CSS基础必须夯实!
很多前端大佬说,要做好前端的话html和css基础必须夯实.那么,达到什么水平才能叫基础夯实呢? 1.拿到设计人员给的图,不管是pc或者是移动端的图,看一遍之后脑海中已经有了很明确的结构和页面书写过程 ...
- 前端学习笔记(js基础知识)
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...
最新文章
- 谁是“艾灵”?是腾讯的真国风 AI 虚拟人!
- git用ssh方式下载和提交代码
- CTFshow 信息收集 web3
- java url utf 8_java中文乱码解决之道(八)—–解决URL中文乱码问题
- PLC与旋转编码器的连接
- 由于AsyncTask是一个单独的类,如何使OnPostExecute()的结果进入主要活动?
- c# mysql 连接类_c#中连接数据库的类怎么写呀?
- Linux/windows com串口 java 接收数据 并解析 web程序
- 计算机硬件无法启动不能读取文件,修复Windows出现的“文件或目录已损坏且无法读取”问题...
- Scratch游戏设计——愤怒的小鸟
- 谷歌浏览器chrome翻译插件完美解决开发者模式插件问题
- 11.23Bom完以及pc端端offset
- 计算机网络第一章(概述)
- 文本摘要评测工具ROUGE的搭建和测试
- 【模拟电子技术Analog Electronics Technology 5】——晶体三极管基极和集电极电阻有什么作用?
- Acrel-2000型电力监控系统可实现配电所配电回路用电的实时监控和管理
- 该掌握什么知识才能成为大数据架构师?
- 辅助继电器的作用与类型 如何区分直流和交流继电器
- qt串口阻塞_Qt串口操作
- 网站域名301重定向到带www网址的几种有效方式