一 .CSS: 网页的表现(通过修改html标签默认的样式让页面展示美观效果)
1.CSS的使用方式
一般情况按照优先级 内联(在那个标签里面写的)>内部样式表(在head里面写的样式)>外部样式表(外部引入的css样式)
选择器越精确(越长)优先级越高 id选择器>class选择器>标签选择器(p,div等等)
2. 选择器
是为了选择到特定的标签
格式 选择器{样式属性:属性值;样式属性:属性值}
(1)通配选择器:(*{ 内容 })直接选择所以标签。
(2)标签选择器:(p{ 内容 })直接使用元素标签。
(3)类名选择器:(.类名{ 内容})直接使用元素名。
(4)id选择器:(#id{ 内容})直接使用元素id。
(5) 逗号选择器:(p,span{ 内容})逗号左右都是完整选择器,满足一方即可。
(6)空格选择器:(#id p{ 内容} )在满足空格前选择器的标签内部去选择空格后满足的标签,可以 是子孙级别的
(7) 大于号选择器:(#id>ul{ 内容})在满足>之前选择器的标签的子级标签汇中选择
(8)加号选择器:(#id >h1+p{内容})加号前面选择器选中的标签紧邻的满足加号后选择器元素
(9)破折号选择器:(#id >h1~p{内容})破折号前面选择器中的标签后面同级别的所以满足破折号 后选择器的元素。
2 .link (#id :link{内容})可以用于a标签的普通状态。
3 :visited(#id: visited{内容})可以用于a标签访问过的状态
4:hover(#id:hover{内容})可以用于标签的鼠标划入状态
5:active(#id: active{内容})可以用于所以标签鼠标点击状态
二,CSS常用样式
1 . 字体样式
font-family指定字体,可以为文字指定多个字体,不同字体间用“,“隔开字体名字中间有空格,要用引号引起来
font-size字体大小多用px/em单位
font-style字体倾斜效果
font-weight字体粗细
2 .文本样式
text-transform英文字母大小写转换 capitalize 单词首字母大写 uppercase全部大写 lowercase 全部小写
text-indent段落内容首行缩进
text-align文本的水平位置
text-decoration none
text-indent 段落开始空 em就是相当于当前字体大小
a.背景
background-color可以改变标签背景
background-image可以改变定义背景图片
background-repeat可以改变图片显示方式
background可以自己设置背景的颜色,图片,大小等等。
3 .列表样式
list-style-type列表样式类型
list-style-image列表样式图片
list-style-position列表样式位置
(1) CSS盒子模型
由上面图可以看到像一个盒子所以称之为盒子模型。
大小(width/height) 内补(Padding) 边框(border) 外补(margin)
内补使用自己背景色
边框可以自定义样色
外补使用外部标签背景色
(2) padding(内边距)
边框于内容之间的宽度,这个距离是和边框的距离,这个部分只有空白,不能设置外观样式,颜色等,只能设置空白的宽度设置
padding设置规则
一个数值是 上右下左
两个数值 第一个代表上下 第二个代表左右
三个数值:第一个代表上 第二个代表左右 第三个代表下
四个数值:第一个代表上 第二个代表右 第三个代表下 第四个代表左
(3) border(边框)
里面的边框,块级元素可以把他撑起来可以设置边框的宽度边框的颜色,边框的样式,也可以单独设置边框的属性。border的设置规则和padding的一样
一个数值是 上右下左
两个数值 第一个代表上下 第二个代表左右
三个数值:第一个代表上 第二个代表左右 第三个代表下
四个数值:第一个代表上 第二个代表右 第三个代表下 第四个代表左
(4) margin(外边距)
标签和他相邻的标签之间的空白宽度,外边距的设置是叠加的。设置规则和
border是一样的。
一个数值是 上右下左
两个数值 第一个代表上下 第二个代表左右
三个数值:第一个代表上 第二个代表左右 第三个代表下
四个数值:第一个代表上 第二个代表右 第三个代表下 第四个代表左
(5) width和height
只定义内容的大小,不含边框和边距。如果内容太多,超过了width或height,那么默认情况下将忽略width或height的设置。overflow属性
定义内容超过width和heigth时的显示方式
auto 根据情况,如果内容超出了width,则出现横向滚动条,如果内容超过了height,则出现纵向滚动条,否则不显示滚地条
hidden 超出部分被隐藏
4、display显示。
1、none:隐藏,是隐藏起来了不是删除了。
2、block:“块”元素,不能定义尺寸。
3、inline :“行内”元素,不能定义尺寸。
4、inline-block:“行内块”元素,可以定义尺寸,可以改写尺寸。
5、浮动
关于浮动运用float将文档流并且向左或右移动,然后浮动到边缘。
可以利用clear来清除浮动,另起一行,有Left right both 清除浮动。
both就是将新的浮动在原来浮动之后另起一行。
6、定位
position:后面加上relative,sticky等。
static静态定位一般不写默认就是静态定位,
relative相对定位:相对文档流的默认位置 能使用lefe,top移动位置
absolute绝对定位 相对于外层第一个非static定位,可以使用lefe,top移动位置
sticky粘性定位 可以利用top 和bottom来选择。
fixed固定定位可以国定在网页左下方和网页右下方。
2.8、扩展
transform属性 可以改变方向
@keyframes可以自定义函数
2.9制作导航栏。
1使用div加a
2使用列表浮动
3使用列表加行内块
可以看D:\webprojects\0826\4导航条.html里面的代码
2.10制作网页页面。
可以利用header和section和aside和footer进行一个也页面的布局使页面更具有条里
可以看D:\webprojects\0827\3页面.html
以上是自己总结所学习的css样式,可能不太好,
希望以后能够更加好,谢谢大家。