一、css与html的结合方式
1.行内样式
html的标签都有一个style属性,直接操作html标签,style属性的值其实就是css代码
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <!--行内样式--> <p style="color: red;font-size:20px;text-decoration: underline;">对于同一个html文件而言,有可能会使用上面所有的选择器,但是,对于同一个标签而言,最多使用2~3种</p> <p style="color: red;font-size:20px;text-decoration: underline;">于同一个html文件</p> <!--总结: 以后很少使用行内样式 原因: a.网页过胖,维护困难 b.style属性中的样式设置只对标签有效,其他的标签无法使用 c.没有达到html和css的分离 --> </body> </html>
2.内嵌样式
出现在当前html文件中,将css代码写在标签之间,并使用进行声明,其中书写css的选择器
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--内嵌样式--> <style> p{ color: red; font-size:20px; text-decoration: underline; } </style> </head> <body> <p>对于同一个html文件而言,有可能会使用上面所有的选择器,但是,对于同一个标签而言,最多使用2~3种</p> <p>于同一个html文件</p> <!-- 总结: 内嵌样式弥补了行内样式的缺点 但是,仍然存在缺点:如果在其他的文件中想要使用当前文件中的css样式,则无法使用 --> </body> </html>
3.链接样式
将css样式单独分离出来,其中书写的是css的选择器
优点:同一个css文件可以同时作用于多个html文件,作用于整个网站,使得整个网站风格统一,后期维护成本降低
使用方式:
a.创建css文件,其中书写选择器
b.在需要使用的html文件中引入【链接进来】,使用
href:css文件的相对路径
rel:stylesheet
type:MIME类型【标记文档类型】,格式:大类型/小类型
css文件:text/css
javascript文件:text/javascript
jpg图片:image/jpg
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入外部的css文件--> <!-- 相对路径:和image的用法完全相同 rel:relationship关系 stylesheet:样式表 rel="stylesheet":描述了当前页面与href所指定的文件之间的关系,href链接的是一个样式表 --> <link href="css/style1.css" type="text/css" rel="stylesheet" /> <link href="css/style2.css" type="text/css" rel="stylesheet" /> </head> <body> <h2>标题</h2> <p>:同一个css文件可以同时作用于多个html文件,作用于整个网站,使得整个网站风格统一,后期维护成本降低</p> <div id="box">用法完全相同</div> <!-- 总结: 链接样式最大的优势在于css代码和html完全分离,并且同一个css文件可以被不同的html文件使用 在实际项目中,设计整个网站,可以将多个html文件共享同一个css文件, 如果需求发生改变,则只需要修改css文件即可 --> </body> </html>
4.导入样式
和链接样式基本相同,只是语法和运作方式不同
语法:
在进行导入
导入方式:
a.@import url(“外部css文件的相对路径”) ,建议使用
b.@import url(外部css文件的相对路径)
c.@import url(‘外部css文件的相对路径’)
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*/导入样式 将外部的css文件引入到当前html文件中 */ @import url("css/style1.css"); /*@import url("css/style2.css");*/ </style> </head> <body> <h2>标题</h2> <p>:同一个css文件可以同时作用于多个html文件,作用于整个网站,使得整个网站风格统一,后期维护成本降低</p> <div id="box">用法完全相同</div> <!-- 注意: 1.链接样式和导入样式在同一个html文件可以多次使用,可以出现多个link或者多个import 2.链接样式和导入样式如果使用多次,则后面出现会覆盖掉前面出现的 3.链接样式中,css文件之间可以进行相互的import,注意路径问题 --> </body> </html>
5.优先级
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--链接样式--> <link href="css/green.css" rel="stylesheet" type="text/css" /> <style> /*导入样式*/ @import url("css/red.css"); </style> <style> /*内嵌样式*/ p{ color: blue; } </style> </head> <body> <!--行内样式--> <!--<p style="color: purple;">恰同学少年,风华正茂</p>--> <p>恰同学少年,风华正茂</p> <!-- 总结: 1.链接样式和导入样式统称为外部样式 2.各自的作用范围: 行内 样式:仅作用于当前的标签 内嵌样式:仅作用于当前html文件 外部样式:关联该css文件的所有html文件 3.优先级 行内样式的优先级最高 一般情况下,谁后出现,则优先匹配 如果内嵌样式和导入样式出现在同一个style标签内,内嵌样式的优先级高 如果内嵌样式和导入样式出现在不同的style标签内,同样遵循就近原则 内嵌样式和外部样式,谁后写则谁的优先级高 4.以后常用内嵌样式和链接样式 --> </body> </html>
二、css常用属性
1.字体属性
font-family:字体类型
font-style:设置是否倾斜
normal:正常
italic:意大利体
oblique:斜体
font-weight:设置文字的粗细
设置方式有两种:数字【取值范围为100~900,数值越大,字体越粗】或者英文单词
normal:正常
bold;粗体
bolder:加粗体
lighter:
font-size:文字大小,一般使用像素,默认的大小为16px
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> p{ /*设置文字字体*/ /*font-family: "楷体";*/ /*可以同时声明多种字体, * 浏览器会在访问者的计算机中查找有没有指定的字体 * 字体的自适配 * 如果列出来的都没有,则使用默认类型 */ font-family: "楷体","宋体","微软雅黑",Arial; font-style: italic; font-weight: lighter; /*常用*/ font-size: 16px; } </style> </head> <body> <p>字体属性</p> </body> </html>
2.文本属性
text-decoration:设置文字的装饰效果 ****
none:正常显示
underline;下划线
overline;顶线
line-through:删除线
text-indent:段落缩进,中文中常用2em【em也是一种计量单位,一般情况下,一个中文占1em,1em = 16px】 ****
text-align:对齐方式
left,center,right,justify【两端对齐】
letter-spacing:设置单词内部字母之间的间距
word-spacing:设置单词之间的间距
text-transform:变化,大小写转换
none:
capitalize:单词首字母大写
uppercase
lowercase
direction:文本方向
ltr:默认,从左到右
rtl: 从右到左
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> p{ /*注意:在css属性中,一个属性的值由多个,则表示全部作用与该标签*/ /*text-decoration: line-through overline underline;*/ /*主要结合p标签使用*/ text-indent: 2em; /*对齐方式 * 注意:此处的对齐方式只是水平方向的 */ text-align: center; /*字符间距*/ /*中文或者英文字母之间的间距*/ letter-spacing: 10px; /*单词间距*/ /*英文单词之间的间距,依据是空格*/ word-spacing: 20px; /*大小写转换*/ /*设置每个单词的首字母大小,类似于Python中的title*/ text-transform: capitalize; /*文本方向*/ direction: rtl; } </style> </head> <body> <p>层叠样式表,用来控制网页样式的一种标记语言,为了将网页中的结构和样式分离,html负责结构,css负责样式 today isa good DAy </p> </body> </html>
3.盒子属性
3.1边框属性
border:表示统一【上下左右】设置,包括边框的宽度,边框样式,边框颜色
border-top
border-left
border-bottom
border-right
border-width:边框宽度
border-style:边框样式
dotted:点画线
dashed:虚线
solid:实线
double:双线
border-color:边框颜色
border-radius:边框削圆角【一般使用百分比设置圆角的程度,当取值为50%,则是一个圆】
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; /*统一设置:*/ /*写法:宽度 样式 颜色*/ /*注意:如果一个矩形的四个边框是相同的样式,则优先使用border*/ border: 2px dashed red; } /*单独设置*/ #div2{ /*border-xxx用于四个边框不同样式的时候*/ border-right: 4px solid green; } #div3{ /* * 注意:border-color,border-width,border-style给出不同数量的属性值,表示不同 * 1个:上下左右 * 2个:前者表示上下,后者表示左右 * 3个:前者表示上,中间表示左右,后者表示下 * 4个:上右下左 */ border-color: blue yellow red green; border-width: 3px; border-style: dotted; } </style> </head> <body> <div>aaaaaa</div> <div id="div2">bbbbbb</div> <div id="div3">cccccc</div> </body> </html>
3.2外边距属性
margin:外边距,可以统一设置,使用px为单位设置距离
margin-top
margin-left
margin-right
margin-bottom
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; border: 2px dashed red; } #div2{ /*注意:如果标签单独存在,则参照物是当前页面[body] * 、如果标签上下左右存在其他的标签,则参照物为最近的其他标签 */ margin: 100px; } #div3{ margin-left: 30px; } </style> </head> <body> <div>aaaaaa</div> <div id="div2">bbbbbb</div> <div id="div3">cccccc</div> </body> </html>
3.3内边距属性
padding:内边距,可以统一设置,使用px为单位设置距离
padding-top
padding-left
padding-right
padding-bottom
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; border: 2px dashed red; } #div2{ /*注意: * 内边距:当设置了内边距之后,原来的矩形的宽高会发生变化 */ padding: 30px; } #div3{ padding-left: 30px; } </style> </head> <body> <div>aaaaaa</div> <div id="div2">bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</div> <div id="div3">cccccc</div> </body> </html>
4.尺寸属性
width:设置元素的宽度
height:设置元素的高度
line-height:行高【注意:当一个元素的文本内容只有一行,如果设置line-height = height,则表示该元素的文本在垂直方向上居中】
text-align:center;水平方向居中
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .box{ width: 300px; height: 300px; border: 1px dashed red; /*设置文字居中*/ /*line-height: 50px; text-align: center;*/ /*削圆角*/ border-radius: 50%; } </style> </head> <body> <div class="box"> 属性尺寸 this is a text </div> </body> </html>
5.背景属性
background:背景图/色
background-color:背景色 *****
background-image:背景图 ****
background-repeat:背景样式是否平铺
repeat:沿着水平和垂直方向同时平铺,默认值
no-repeat:不平铺,只显示一次
repeat-x:只沿着水平方向平铺
repeat-y:只沿着垂直方向平铺
background-position:背景图像的位置
left right center top bottom
background-attachment:设置背景图是否随着网页滚动条一起滚动 ****
scroll:会随着滚动,默认值
fixed: 固定的
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*div{ width: 100%; height: 100%; }*/ body{ width: 100%; height: 5000px; /*设置背景颜色*/ /*background-color: red;*/ background: purple; /*设置背景图片*/ /*background: url(img/背景1.jpg);*/ /*background-image: url(img/背景1.jpg);*/ /*background-image: url(img/reg.png);*/ /*background-repeat: no-repeat;*/ /*background-attachment: fixed;*/ /*从上往下的颜色渐变,默认*/ /*background: linear-gradient(red,blue);*/ /*从左到右颜色渐变*/ /*background: linear-gradient(to right,red,blue);*/ /*从左上角到右下角的颜色渐变*/ /*background: linear-gradient(to bottom right,red,blue);*/ } div{ width: 200px; height: 200px; background-color: red; } p{ width: 100px; height: 100px; background-color: yellow; } /*页面布局的时候,想要看到某个标签的大小【位置】,可以通过设置宽高,结合设置边框或者设置背景*/ </style> </head> <body> <div> <p>文本</p> </div> </body> </html>
6.和列表相关的属性
list-style:列表类型 ,项目符号 项目符号的位置【inside outside】
list-style-image:项目符号
list-style-position:项目符号的位置
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> li{ background-color: orange; /*项目符号默认在li的外面*/ /*list-style-position: inside;*/ /*项目符号默认为实心圆点,也可以设置为空心圆点或者实心方框 * 也可以自定义【设置为图片】 */ /*list-style-image: url(img/dog.jpg);*/ /*可以统一设置项目符号和项目符号的位置*/ list-style: url(img/dog.jpg) inside; } </style> </head> <body> <ul> <li>苹果</li> <li>香蕉</li> <li>菠萝</li> <li>西瓜</li> <li>猕猴桃</li> </ul> </body> </html>
7.浮动属性
div是块级元素,一个div在页面中独占一行【自动换行】,默认从上往下依次排列,这种排列方式称为流
元素浮动之前,是竖向排列的,但是,浮动之后,变为横向排列
float:设置元素浮动
none:
left:以左边为参照,浮动起来
right:以右边为参照,浮动起来
clear:清除浮动,取值只能是left或者right【表示将原先设置的浮动清除掉,避免对后面其他元素位置的影响】
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #div1{ width: 100px; height: 100px; background-color: red; /*设置浮动*/ float: right; } #div2{ width: 200px; height: 200px; background-color: green; float: left; } #div3{ width: 300px; height:300px; background-color: cyan; float: left; } </style> </head> <body> <div id="div1">aaaaa</div> <div id="div2">bbbbb</div> <div id="div3">ccccc</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 300px; border: 1px solid green; float: right; } li{ width: 40px; height: 30px; border: 1px solid red; float: left; } </style> </head> <body> <div> <ul> <li>苹果</li> <li>香蕉</li> <li>菠萝</li> <li>西瓜</li> <li>猕猴</li> </ul> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> img{ width: 200px; height: 300px; float: left; } p{ text-indent: 2em; margin: 0px; padding: 10px; /*float: left;*/ } span{ /*注意:设置一个标签的属性,先设置浮动,然后设置其他的属性*/ float: left; font-size: 30px; font-family: "黑体"; font-weight: bold; } </style> </head> <body> <img src="img/zuchongzhi.png" /> <p> <span>祖</span>冲之,429年(南朝宋元嘉六年)出生于建康(今南京),祖籍范阳郡遒县(今河北涞水县)。西晋末期,北方发生大规模战乱,祖冲之的先辈从河北迁徙到江南,并在江南定居下来。祖冲之就出生在江南,其祖父祖昌任刘宋朝大匠卿,是朝廷管理土木工程的官吏,父亲祖朔之做“奉朝请”,学识渊博,常被邀请参加皇室的典礼、宴会。 祖冲之从小就受到很好的家庭教育。爷爷给他讲“斗转星移”,父亲领他读经书典籍,家庭的熏陶,耳濡目染,加之自己的勤奋,使他对自然科学和文学、哲学,特别是天文学产生了浓厚的兴趣,在青年时代就有了博学的名声 祖冲之从小就受到很好的家庭教育。爷爷给他讲“斗转星移”,父亲领他读经书典籍,家庭的熏陶,耳濡目染,加之自己的勤奋,使他对自然科学和文学、哲学,特别是天文学产生了浓厚的兴趣,在青年时代就有了博学的名声 由于祖冲之博学多才的名声,被南朝宋孝武帝派至当时朝廷的学术研究机关华林学省做研究工作,后来又到总明观任职。当时的总明观是全国最高的科研学术机构,相当于现在的中国科学院。总明观内分设文、史、儒、道、阴阳5门学科,实行分科教授制度,请来各地有名望的学者任教,祖冲之就是其一。在这里,祖冲之接触了大量国家藏书,包括天文、历法、术算方面的书籍,具备了借鉴与拓展的先决条件。 </p> </body> </html>
8.显示属性
display:设置标签的显示状态
none:隐藏状态,不会占据空间,也无法显示,相当于该元素不存在,主要用于页面的重绘或者重排,在动画中使用较多
block:块级标签
特点:总是以一个块的形式表现,可以独占一行
注意:可以设置宽高以及内外边距,如果不设置宽,默认和父标签的宽相等,如果不设置高,则高度随着自身的内容自适应
代表:div li hn p
inline:行内标签
特点:不会自动换行
注意:宽高随着内容自适应,设置宽高或者内外边距无效
代表:span a
作用:如果给一个块级标签设置inline值,则可以将一个块级标签转换为行内标签
inline-block:行内块级标签
特点:不但具有block的特点,同时也具有inline的特点,【可以设置宽高,同时可以换行】
使用场景:导航的实现
代码演示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } ul li{ float: left; } a{ /*a本身是inline,将display设置为block,则转换为块级标签,可以设置宽高和内外边距*/ display: block; width: 30px; height: 30px; background-color: cyan; text-align: center; line-height: 30px; text-decoration: none; } </style> </head> <body> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ /*div本身是block,如果将display属性设置为inline,则设置宽高和内外边距将不起作用*/ /*可以将div从竖向排列便成为横向排列*/ display: inline; width: 200px; height: 200px; background-color: cyan; } </style> </head> <body> <div>aaaaaaaaaaa</div> <div>bbbb</div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> ul,li,a,*{ padding: 0px; margin: 0px; text-decoration: none; list-style: none; } li{ /*li或者div从竖向变成横向,除了使用float之外,还可以display的inline-block*/ /*float: left;*/ display: inline-block; border: 1px solid red; } </style> </head> <body> <ul> <!--空白符在浏览器中不会被忽略,以类似间距的方式体现--> <li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li> </ul> </body> </html>