代码拉取完成,页面将自动刷新
css:
1.为什么需要css?
问题一:HTML的作用是负责数据的格式化展示的
如果使用HTML来进行数据的样式,则发现样式书写起来太过于麻烦,不易于维护,不能够重复的使用。
问题二:HTML可以有效的组织数据的展示,但是不同类型数据在浏览器中的分布没办法实现
未解决上面问题:
诞生了css语言,专门用来给网页进行样式开发
2.什么是css?
css的概念:
层次样式表
作用:
给网页进行样式的开发
给网页进行布局
特点:
语言特别简单
开发的样式可以重复使用
依赖于HTML
3.使用css?
css的申明
外联式样式表
<link rel="stylesheet" href="/css/default.css">
内嵌样式表
<style type="text/css"></style>
元素内定
<p style="font-size:10.5pt">
导入样式表
<style type="text/css">
<!--
@import url(css/home.css);
-->
</style>
css的选择器
css的常用样式
css的盒子模型
css的定位
css的css的布局
css的申明:
1.在head标签中使用style标签中申明
作用:此申明一般申明当前网页的公共样式或者某个标签的单独样式
2.在标签上使用style属性进行申明:
作用:次申明会将css样式直接作用于当前标签
3.在head标签中使用link标签引入外部申明好的css文件
作用:此申明相当于调用,解决了不同网页的样式重复使用的问题,一次申明,随处使用
问题:三种申明方法的优先级
2>1>3
css的选择器:
标签选择器:
标签名{
样式名1:样式值1;
样式名2:样式值2;
}
id选择器:
#标签的id属性值{
样式名1:样式值1;
样式名2:样式值2;
}
作用:给某个指定的样式设置指定的样式
类选择器:
./类选择器名{
}
作用:给不同的标签添加相同的样式
全部选择器:
*{
}
作用:选择所有的HTML标签,并添加相同的样式
组合选择器:
选择器1,选择器2{
}
作用:解决不同的选择器之间的样式相同的添加
子标签选择器:
选择器1 子标签{
}
属性选择器:
标签名[属性名=属性值]{样式1:样式值1;...}
作用:选择某标签指定具备某属性为某属性值的标签
css使用过程:
1.申明css代码域
2.使用选择器选择需要添加样式的标签
根据需求来:
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id,属性,style属性申明方式给某个标签添加个性化样式
3.书写样式单
边框设置
border:solid 1px;
字体设置
font-size:10px;设置字体大小
font-family:"黑体";设置字体格式
font-weight:bold;设置字体加粗
字体颜色设置
color:red;
背景颜色设置
background-color:颜色;
背景图片设置
background-img:url(图片的相对路径)
background-repeate:no-repeate;设置图片不重复
background-size:cover;图片平铺整个页面
高和宽设置
浮动设置
float:left/right
行高设置
line-height:10;
css的一些基本样式:
text-align:center 设置样式居中
background-color:gray 设置背景颜色(灰)
width: 设置高度 单位px,%
height: 设置宽度 单位px,%
padding: 设置内边距 单位px
transform:rotate(-10deg) scale(1.5); 设置倾斜角度 正:顺时针、负:逆时针 大于1放大,小于1缩小
margin: 设置外边距 单位px
标签号:hover 设置伪类标签 (鼠标到达时实现的样式)
z-index:1; 设置显示优先级别,数值越大优先级越高
transition:1.5s 设置显示时间
transparent透明颜色
css盒子模型:
div标签:
块级标签,主要用来进行网页布局,会将期中的子内容作为一个独立的整体存在
特点:
默认宽度是页面的宽度,但是可以设置
高度默认是没有的,但是可以设置(可以顶开)
盒子模型:
外边距:margin
作用:用来设置元素与元素之间的间距
居中设置:margin 0px auto;上下间隔是0,水平居中
可以根据需求单独设置上下左右的外边距
边框:border
作用:用来设置元素的边框大小
可以单独设置上下左右
内边距:padding
作用:设置内容和边框之间的距离
注意:内边距不会改变内容区域的大小
可以单独设置上下左右
内容区域:
作用:改变内容区域的大小
设置宽和高即可以改变内容区域的大小
css的定位学习:position
相对定位:relative
作用:相对元素原有位置移动指定的距离(相对自己原有的位置
)可以使用top,left,right,bottom
注意:其他元素的位置是不动的
绝对定位:absolute
作用:可以使用元素参照body或者父元素来进行移动
注意:如果父级元素成为参照元素,必须使用相对定位属性。默认情况下是以body为参考来相对移动的
固定定位:fixed
作用:将元素固定显示在页面的指定位置,不会随着滚动条的移动而改变位置
以上定位均可以使用top,left,right,bottom来进行移动
z-index:此属性是用来申明元素的显示级别(都必须是定位元素)
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。