一、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>
扫一扫
114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
