html5快速入门(二)—— CSS简介
前言:
1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真正快速入门,如果有哪些不清楚的地方或者错误,欢迎联系我
2.更新时间没有规律,一般会在3天左右更新一篇(全系列预计会有12篇)因为需要工作,所以只能在闲暇之余整理,如果有喜欢的朋友可以关注我,将会第一时间获得更新信息
3.如果有需要Reactive Native + H5跨平台开发的朋友,可以联系我,在本系列结束之前会根据需求的程度决定是否继续
4.全系列文章最后尽可能地附上综合实例,帮助朋友更好地理解
5.此系列会涉及到HTML、CSS、JavaScript等
另:有很多朋友私聊我说图片不能正常显示的问题,测试后发现简书上可以在windows和mac端完美显示,如果看不到图片麻烦移步简书链接
CSS简介
CSS(Cascading Style Sheets):层叠样式表,它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
CSS的编写格式是键值对的形式
- 格式:属性名 : 属性值
color:blue;
background-color:green;
font-size:15px;
CSS的3种使用形式
行内样式(内联样式):在标签的style属性中书写(标签都有style属性)
<!-- 行内样式 -->
<!-- 字体大小为25,颜色绿色,背景色亮灰 -->
<div style="font-size: 25px; color: green; background-color: lightgrey;">div容器</div>
<!-- 字体颜色蓝色,边框宽度为1且为黑色 -->
<h2 style="color: blue;border: 1px double black;">Cascading Style Sheets</h2>
效果:
业内样式:在本网页的style标签中书写(因为body标签用来描述内容和结构,其它东西都放到head中,所以将业内样式写在head标签内)
<head>
<meta charset="UTF-8">
<title>CSS页内样式</title>
<!-- 页内样式 -->
<style>
/* 标签选择器 */
/* div文字颜色为蓝色,字体大小25,边框为红色单边框 */
div{
color: blue;
font-size: 25px;
border:2px solid red;
}
/* p文字颜色为橘色,字体17,边框为紫色双边框宽度为5 */
p{
color: orange;
font-size: 17px;
border:5px double blueviolet;
}
</style>
</head>
<body>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<p>段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落</p>
</body>
效果:
外部样式:在单独的CSS文件中书写,然后在网页中用link标签进行引用
- 先新建一个css文件,在css文件内书写我们需要的样式```
div{
color: blue;
font-size: 25px;
border:2px solid red;
} p{
color: orange;
font-size: 17px;
border:5px double blueviolet;
} ```
- 然后引入外部样式
<br><br> ``` <head>
<meta charset="UTF-8">
<title>CSS外部样式</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" href="css/index.css">
</head> <body>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<div>div容器div容器div容器div容器div容器</div>
<p>段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落</p>
<p>段落段落段落段落段落段落段落段落</p>
</body> ```
效果:
注意:开发中,一般都使用外部样式,结构比较清晰
CSS常用选择器
属性:通过属性的复杂叠加,才能做出漂亮的网页
选择器:通过选择器找到对应的标签设置样式
- 标签选择器:根据标签名找到对应的标签
<style>
/* 标签选择器 */
/* div文字颜色为蓝色,字体大小25,边框为红色单边框 */
div{
color: blue;
font-size: 25px;
border:2px solid red;
}
</style>使用场景:一次性设置对应标签的时候
类选择器
/* 类选择器 */
.test1{
color: red;
font-size: 30px;
border:5px double green;
}- 使用
<div class="test1">类选择器</div>
<p class="test1">类选择器</p>使用场景:让需要它的标签主动去使用它
id选择器
/* ID选择器 */
#main{
font-size: 50px;
}- 使用:
<div id="main">id选择器</div>
使用场景:全局只让一个标签占有(独一无二)
并列选择器(可以理解为或)
/* 并列选择器(或) */
#main, .test1{
border:10px solid orange;
}使用场景:只要有其中一个选择器就可以使用选择器内的样式
复合选择器(可以理解为且)
/* 复合选择器(且,前面不可以是ID选择器) */
p.test1{
color: yellow;
}使用场景:同时拥有2个选择器的标签便可以使用选择器内的样式
后代选择器
/* 后代选择器
前面为父标签,后面为子标签
*/
div a{
color: darkgray;
}使用场景:设置父标签内的所有子标签(包括子标签内的相同标签的子标签)的时候
直接后代选择器
/* 直接后代选择器 */
div > p{
font-size: 90px;
}使用场景:设置父标签的子标签的时候
伪类
input:focus{ /* 获得焦点 */ }
使用场景:当标签激活焦点的时候触发
伪元素:和伪类使用相似
div.test1:first-letter{ }
CSS不常用选择器
- 相邻兄弟选择器:与标签上下相邻的同一级标签
div + p{
}
注意条件:相邻,且同一级
- 属性选择器:可以将其看成数组(一维/二维数组)
div[name]{
}
div[name="Tom"]{
}
div[name][age]{
}
- 通配符:设置所有标签
*{
}
选择器的优先级与权值的关系
- 相同级别的选择器遵循:就近原则 > 叠加原则
- 不同类型的选择器:选择器的针对性越强,它的优先级就越高,这里涉及到权值的问题,先来看下面的表
选择器类型 | 权值 |
---|---|
通配选择符 | 0 |
标签选择器 | 1 |
类选择器 | 10 |
属性选择器 | 10 |
伪类 | 10 |
伪元素 | 1 |
id选择器 | 100 |
important | 1000 |
- 原则:选择器的权值累计越高,优先级越高,如果权值相同,后定义的优先(就近原则)
- 优先级排序:important > 内联 > id选择器 > 类选择器 > 标签选择器|伪类|属性选择 > 伪元素 > 通配符 > 继承
HTML标签类型
HTML有N多标签,根据显示的类型,主要分为三大类
- 块级标签:独占一行,能随时设置宽度和高度(如:div、p、h1…h6、ul、li)
<style>
/* div标签选择器 */
div{
/*背景色*/
background-color: yellow;
}
</style> <body> <div>我是div容器</div>
<div>我是div容器</div>
<div>我是div容器</div> </body>效果:
- 行内标签(内联标签):多个行内标签能同时显示在一行,宽度高度取决于内容尺寸(如:span、a、label)
<style>
/* span标签选择器 */
span{
/*背景色*/
background-color: red;
}
</style> <body> <span>我是span容器</span>
<span>我是span容器</span>
<span>我是span容器</span>
<span>我是span容器</span> </body>效果:
- 行内-块级标签(内联-块级标签):多个行内-块级标签可显示在同一行,能随时设置宽度和高度(如:input、button)
![Uploading Snip20160614_7_103697.png . . .]
```
<style>
/* input标签选择器 */
input{
/*背景色*/
background-color: yellow;
}
</style>
<body>
<input type="text">
<input type="date">
<input type="text">
<input type="date">
</body>
```
效果:
修改标签的显示类型 —— display/visibility
在开发中,我们经常需要将各种类型的标签拼凑在一起,而如果按照上面标签的类型来看,显然块级标签后就没办法再添加其他标签,这样也就大大降低了灵活性。这个时候我们就需要来看看`display属性,它们可以用来修改标签的显示类型,提高标签之间拼凑时的灵活性
display属性有4个值
- none:隐藏标签(同时隐藏内容和占位,也可以说同时隐藏结构)
- block:让标签变为块级标签
- inline:让标签变为行内标签
- inline-block:让标签变为行内-块级标签(内联-块级标签)
div{
/*设置背景色*/
background-color: red;
} /* 隐藏 */
.noneDiv{
display: none;
/*设置背景色*/
background-color: yellow;
} /* 块级 */
.blockInput{
display: block;
/*设置背景色*/
background-color:orange;
} /* 行内 */
.inlineDiv{
display: inline;
/*设置背景色*/
background-color: green;
} /* 行内-块级 */
.inline-blockDiv{
display: inline-block;
/*设置背景色*/
background-color: gray;
} </style> <body> <div>默认的div</div>
<div class="noneDiv">隐藏div标签</div>
<div class="inlineDiv">变成行内标签的div</div>
<div class="inline-blockDiv">变成行内-块级标签的div</div><br><br> <!--默认的input-->
<input type="text">
<input type="text">
<!--变成块级标签的input-->
<input class="blockInput" type="text">
<input class="blockInput" type="text"> </body>效果:
visibility属性有4个值
- visible:显示标签(默认)
- hidden:隐藏标签(只隐藏内容,但是依旧占位)
- collapse:这个属性主要用在表格中,它可以删除一行或一列,但不会影响表格的布局,而且被行或列占据的空间会留给其他内容,如果用在其他标签,则呈现hidden的效果
- inherit:规定应该从父标签继承visibility属性的值
<style>
div{
/*高*/
height:100px;
/*背景色*/
background-color: yellow;
} /* 隐藏 */
.hiddenDiv{
visibility: hidden;
}
</style> <body>
<div>div</div>
<div class="hiddenDiv">隐藏的div</div>
<div>div</div>
</body>效果:
CSS属性分类
CSS有很多属性,如果根据继承性划分,主要分为两大类
- 可继承属性:父标签的属性值会传递给子标签(一般是文字控制属性)
- 所有标签可继承(visibility、 cursor)
- 继承(letter-spacing、word-spacing、white-space、
line-height
、color
、font-family
、font-size
、font-style、font-variant、font-weight
、text-decoration
、text-transform、direction) - 块级标签可继承(
text-indent
、text-align
) - 列表标签可继承(
list-style
、list-style-type、list-style-position、list-style-image)
<style>
/* 文字控制类 */
body{
color:red;
font-size:25px;
}
</style>- 不可继承属性:父标签的属性值不会传递给子标签(一般是区块控制属性)
<style>
/* 区块控制类 */
div{
color:red;
font-size:25px;
}
</style>- 可继承属性:父标签的属性值会传递给子标签(一般是文字控制属性)
总结:一般如果是大小、形状之类的一般都不可继承的
盒子模型
先来看看盒子里面的结构 —— 盒子由内容、内边距、边框、外边距构成
标准的盒子模型标准是这样的
如果所有浏览器都遵循这样的规则,那么就不会产生适配等问题,但是偏偏有个顽皮的熊老人(这个搅屎棍→ →)搞了自己的模型标准
也就是说网页上的每一个标签都是盒子,每个盒子都有4个属性
- content(内容):盒子里面装的东西(网页中通常是指文字和图片)
- height:设置元素高度
- max-height:设置元素最大高度
- max-width:设置元素的最大宽度
- width:设置元素宽度
- min-height:设置元素最小高度
- min-width:设置元素最小宽度
- padding(填充,内边距)
- padding:在一个声明中设置所有内边距属性
- padding-top:设置元素的上内边距
- padding-right:设置元素的右内边距
- padding-bottom:设置元素的下内边距
- padding-lfet:设置元素的左内边距
<style>
div{
/*这边直接使用复合属性padding:属性顺序为上\右\下\左(顺时针)如果只设置2个值,那么第一个值指上下,第二个值指左右*/ padding: 25px 20px;
/*背景颜色*/
background-color: blue;
}
</style> <body>
<div>div标签div标签</div>
</body>效果:
- margin(外边距):让盒子与盒子之间保留一定空隙
- margin:在一个声明中设置所有外边距属性
- margin-top:设置元素的上外边距
- margin-right:设置元素的外边边距
- margin-bottom:设置元素的下外边距
- margin-lfet:设置元素的左外边距
<style>
div{
/*外边距和内边距相似*/
margin: 30px 40px; /*背景颜色*/
background-color: darkmagenta;
} </style> <body>
<div>div标签div标签</div>
</body>效果:
- border(边框):盒子本身
- border是个复合属性,属性的顺序是(border-width,border-style,border-color)
<style>
div{
/*边框设置 宽21px 双框 红色*/
border: 20px double red;
}
</style> <body>
<div>div标签div标签</div>
</body>效果:
- content(内容):盒子里面装的东西(网页中通常是指文字和图片)
CSS3新特性
- RGBA透明度:RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道,用来设置透明值
<style>
div{
/*设置宽高*/
width: 200px;
height: 50px;
}
.test1{
background-color: rgba(123,0,0,1.0);
}
.test2{
background-color: rgba(123,0,0,0.8);
}
.test3{
background-color: rgba(123,0,0,0.0);
}
.test4{
background-color: rgba(123,0,0,0.6);
}
.test5{
background-color: rgba(123,0,0,0.4);
}
.test6{
background-color: rgba(123,0,0,0.2);
}
</style>
<body>
<div class="test1">div1.0</div>
<div class="test2">div0.8</div>
<div class="test3">div0.0</div>
<div class="test4">div0.6</div>
<div class="test5">div0.4</div>
<div class="test6">div0.2</div>
</body>
效果:
补充:既然有透明度,那么就有不透明度(最简单的蒙版效果)
<style>
div {
/*设置宽高*/
width: 200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置不透明度*/
opacity:0.35;
}
</style>
<body>
<div>div1.0</div>
</body>
效果:
- 块阴影和圆角阴影:box-shadow text-shadow
<style>
div {
/*设置宽高*/
width: 200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置外边距*/
margin: 20px;
/*设置块阴影
参数一:水平偏移
参数二:垂直偏移
参数三:模糊距离
参数四:阴影颜色
*/
box-shadow: 10px 10px 10px blue;
}
</style>
<body>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
<div>div</div>
</body>
效果:
- 圆角:border-radius
<style>
div {
/*设置宽高*/
width: 200px;
height: 50px;
/*设置背景色*/
background-color: red;
/*设置外边距*/
margin: 20px;
}
.test1{
/*底部左边*/
border-bottom-left-radius: 30px;
}
.test2{
/*顶部右边*/
border-top-right-radius: 30px;
}
.test3{
/*底部右边*/
border-bottom-right-radius: 30px;
}
.test4{
/*顶部左边*/
border-top-left-radius: 30px;
}
.test5{
/*四个角*/
border-radius: 10px;
}
</style>
<body>
<div class="test1">div</div>
<div class="test2">div</div>
<div class="test3">div</div>
<div class="test4">div</div>
<div class="test5">div</div>
</body>
效果:
- 边框图片:border-image(不常用,用到再说)
- 形变:transform: none | [](后面结合实例,便于理解)
CSS布局
默认情况下,所有网页标签都在标准流布局中(从上往下,从左往右,相互依赖)
脱离标准流(就是固定在一个地方),脱离标准流主要的两种方式有两种
注意:标签只要一浮动,它的类型就会被强制转为行内块级标签
- float属性:让标签浮动在父标签的左边和右边(显然不够灵活)
- left:浮动在父标签的最左边
- right:浮动在父标签的最右边
<style>
#main{ background-color: yellow;
width: 350px;
height: 200px;
} .test1{
background-color: red; float: left;
}
.test2{
background-color: blue; float: right;
}
</style> <body>
<div id="main">
<div class="test1">左</div>
<div class="test2">右</div>
</div>
</body>效果:
- position属性:结合left、right、top、bottom属性就不一样了(显然这个比较厉害)
- 注意:他的位置是相对于浏览器窗口来决定的
<style>
#main{ background-color: yellow;
width: 350px;
height: 200px;
} .test1{
background-color: red; position: absolute;
top: 20px;
left: 20px;
}
.test2{
background-color: blue; position: absolute;
bottom: 20px;
right: 20px;
}
</style> <body>
<div id="main">
<div class="test1">左</div>
<div class="test2">右</div>
</div>
</body>效果:
- float属性:让标签浮动在父标签的左边和右边(显然不够灵活)
居中
水平居中
- 如果是行内、行内块级标签,设置text-align: center;
<style>
#main{ background-color: yellow;
width: 350px;
height: 200px;
/*设置内容水平居中(可继承)*/
text-align: center;
} span{
background-color: blue;
}
</style> <body>
<div id="main">
<span>行内标签</span>
</div>
</body>效果:
- 如果是块级标签,则需设置 margin: 0 auto;
<style>
#main{ background-color: yellow;
width: 350px;
height: 200px;
/*设置内容水平居中(可继承)*/
text-align: center;
} .test1{ width: 200px;
background-color: blue;
text-align: center;
margin-left: auto;
margin-right: auto;
/*或者*/
/*margin: 0 auto;*/
}
</style> <body>
<div id="main">
<div class="test1">块级标签</div>
</div>
</body>效果:
垂直居中
- 如果是行内、行内块级标签,设置line-height:总高度;
<style>
#main{ background-color: yellow;
width: 350px;
height: 200px;
/*设置内容水平居中(可继承)*/
text-align: center;
} .test1{
width: 350px;
height: 30px;
background-color: blue; /*设置垂直居中,让它等于父标签的高度*/
line-height: 200px;
}
</style> <body>
<div id="main">
<span class="test1">行内标签</span>
</div>
</body>效果:
- 如果是块级标签,需要通过定位来做(一般不会将块级标签做垂直居中操作)
<style>
#main{ background-color: yellow;
width: 350px;
height: 200px;
/*设置内容水平居中(可继承)*/
text-align: center;
/*告诉父标签使用绝对定位*/
position: relative;
} .test1{
width: 200px;
height: 30px;
background-color: blue; /*重写,设置内容居中*/
line-height: 30px;
margin: 0 auto;
/*设置相对路径*/
position: absolute;
top:50%;
left:50%;
/*平移使其与父标签居中显示*/
transform: translate(-50%, -50%);
}
</style> <body>
<div id="main">
<span class="test1">行内标签</span>
</div>
</body>效果:
昨晚的文章不完整,这个才是第二篇的完整版,对造成的不便感到抱歉,综合实例单独做一篇吧!
html5快速入门(二)—— CSS简介的更多相关文章
- html5快速入门(一)—— html简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- html5快速入门(四)—— JavaScript
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- HTML5快速入门(三)—— 标签综合运用
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- IT兄弟连 HTML5教程 CSS3揭秘 CSS简介
HTML使用标签将内容放到网页上,也可使用元素和属性来控制简单的文档外观.如果希望更全面地控制Web页面的外观和布局,则需要使用层叠样式表(简写为CSS).CSS规范的工作原理在于允许用户制定一些规则 ...
- python3.5+django2.0快速入门(二)
昨天写了python3.5+django2.0快速入门(一)今天将讲解配置数据库,创建模型,还有admin的后台管理. 配置数据库 我们打开mysite/mysite/settings.py这个文件. ...
- HTML5 快速学习二 Canvas
本篇文章开始讲解HTML5的核心功能之一:Canvas 通过Canvas可以动态生成和展示图形.图表.图像以及动画. Canvas API功能非常多,我们将讨论最常用的功能. 我们先新建一个canva ...
- CSS入门(css简介与样式汇总、CSS的使用方式和特征、CSS基础选择器和复杂选择器、边框阴影)
一.CSS的作用 1.以统一的方式实现样式的定义 2.提高页面样式的可重用性和可维护性 3.实现了内容(HTML)和表示(CSS)的分离 HTML和CSS之间有什么关系? HTML:构建网页的结构 C ...
- Mysql快速入门(二)
多表关联查询 JOIN 按照功能大致分为如下三类: CROSS JOIN(交叉连接) INNER JOIN(内连接或等值连接). OUTER JOIN(外连接) 交叉连接 交叉连接的关键字:CROSS ...
- jquery 快速入门二
---恢复内容开始--- 操作标签 样式操作 样式类 addClass();//添加指定的CSS类名. removeClass();//移除指定的类名. hasClass();//判断样式不存在 to ...
随机推荐
- javascript中函数的3个高级技巧
× 目录 [1]作用域安全 [2]惰性载入 [3]函数绑定 前面的话 函数对任何一门语言来说都是一个核心的概念,在javascript中更是如此.前面曾以深入理解函数系列的形式介绍了函数的相关内容,本 ...
- 深入理解客户区尺寸client
前面的话 关于元素尺寸,一般地,有偏移大小offset.客户区大小client和滚动大小scroll.前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区 ...
- java笔试题
下面有关JVM内存,说法错误的是? A.程序计数器是一个比较小的内存区域,用于指示当前线程所执行的字节码执行到了第几行,是线程隔离的 B.Java方法执行内存模型,用于存储局部变量,操作数栈,动态链接 ...
- 一起学微软Power BI系列-官方文档-入门指南(5)探索数据奥秘
我们几篇系列文章中,我们介绍了官方入门文档与获取数据等基本知识.今天继续给大家另外一个重点,探索数据奥秘.有了数据源,有了模型,下一步就是如何解析数据了.解析数据的过程需要很多综合技能,不仅仅是需要掌 ...
- 创建第一个 vlan network "vlan100" - 每天5分钟玩转 OpenStack(94)
上一节我们在 ML2 配置中 enable 了 vlan network,今天将创建 vlan100 并讨论底层网络变化. 打开菜单 Admin -> Networks,点击 “Create N ...
- 在 ML2 中 enable local network - 每天5分钟玩转 OpenStack(79)
前面完成了一系列准备工作,本节开始将创建各种 Neutorn 网络,我们首先讨论 local network. local network 的特点是不会与宿主机的任何物理网卡相连,也不关联任何的 VL ...
- EasyUI+MVC+EF简单用户管理Demo(问题及解决)
写在前面 iframe-src EntityFramework版本 connectionStrings View.Action.页面跳转 EasyUI中DataGrid绑定 新增.修改和删除数据 效果 ...
- HTML5 音频 <audio>
HTML5 提供了播放音频的标准. 一.Web 上的音频 直到现在,仍然不存在一项旨在网页上播放音频的标准. 今天,大多数音频是通过插件(比如 Flash)来播放的.然而,并非所有浏览器都拥有同样的插 ...
- 【集合框架】JDK1.8源码分析之TreeMap(五)
一.前言 当我们需要把插入的元素进行排序的时候,就是时候考虑TreeMap了,从名字上来看,TreeMap肯定是和树是脱不了干系的,它是一个排序了的Map,下面我们来着重分析其源码,理解其底层如何实现 ...
- spring boot 配置启动后执行sql, 中文乱码
spring.datasource.schema指定启动后执行的sql文件位置. 我发现中文乱码,原因是没有指定执行sql script encoding: spring: datasource: u ...