CSS学习(2)--菜鸟教程

选择器

id选择器只能用一次,样式表中用#名称来定义,class选择器可以使用多次

HTML使用CSS

内嵌样式表:

写在<head>中的<style>里面

内联样式:

直接写在标签属性里面

导入样式表:

使用标签将CSS文件导入html文件中

使用标签将CSS文件导入html文件中 @import "URL";或者

 @import url("URL");

需要定义在所有样式的最前面

先加载页面,在加载样式,用户体验感差

CSS注释

注释以/*开头,以*/结束

注释不能嵌套

CSS长度单位

相对长度单位

em

相对于自身 font-size(字体大小)属性的值,如果自身没有设置,则继承父元素 font-size 属性的值,1em 等同于 font-size 属性值,例如 font-size 的值为 16px,那么 1em 就等于 16px,2em 就等于 32px:

CSS文本

text-indent:首行缩进

text-alion:对齐方式

left、right、center

justify 两边对齐

text-transform:

uppercase

lowercase

calpitalize

letter-spacing:调整字间距

text-decoration

underline

overline

line-through

color

设置文本颜色

direction

设置文本方向

line-height

行高

letter-spacing

字间距

text-alion

对齐方式

text-decoration

文本装饰(下划线)

text-indent

首行缩进

text-transform

文本转换大小写等

CSS文字

font-size(字体大小)

font-style(用于设置字体倾斜)

font-family(设置字体)

font-weight(设置字体粗细)

font-family

字体

font-size

字体大小

font-weight

字体粗细

font-style

字体是否倾斜

~~~~~~~~~~

a:link {color:#FF0000;}/* 未被访问的链接 */

a:visited {color:#00FF00;}/* 已被访问的链接 */

a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */

a:active {color:#0000FF;}/* 正在被点击的链接 */

安照l v h a的顺序写

CSS列表

list-style(下面三个的符合写法,五顺序)

list-style-image

自定义显示图标,url()

list-style-position

inside

outside

inherit

list-style-type(编号的形状)

circle(空心圆)

square

disc(实心圆,默认)

lower-roman

CSS表格

  在 CSS 中设置表格边框,请使用 border 属性

当CSS修饰表格时,要用border-collapse将边框合并

表格宽度和高度:通过 width 和 height 属性定义表格的宽度和高度

表格文本对齐:text-alion水平对齐、vertical-alion竖直方向对齐(top,bottom,center)

 当border-collapse:separate时,border-spacing和才起作用,用法:border-spacing:w-length h-length

caption-side:标题的位置(top,bottom,inherit)

CSS轮廓:outline

在元素的周围划线

outline-color

outline-style

none:没有(默认)

dotted:点

dashed:长方形块

double:双solid

solid:实线

out-width

thin:细边框

thick:粗边框

medium:中等边框

length:多少像素

CSS 框模型

~~~~~~~~~~

外边距可以是负值,而且在很多情况下都要使用负值的外边距

元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的

内边距padding

padding 属性接受长度值或百分比值,但不允许使用负值。

padding-color

transparent(设置透明,不显示,默认)

padding-style

padding-width

外边距margin

margin: top right bottom left

如果缺少左外边距的值,则使用右外边距的值

如果缺少下外边距的值,则使用上外边距的值

如果缺少右外边距的值,则使用上外边距的值

margin默认值为0

auto:游览器的默认宽度

CSS 外边距合并

    外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。

    合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者

~~~~~~~~~~

    只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并

CSS定位

注释:overflow 属性仅适用于具有指定高度的块元素。


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

卓越综合高中|卓越综合高中
卓越综合高中
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业
易捷尔高职单招|易捷尔高职单招,易捷尔高职单招培训,单招分数线,单招录取分数线,高职单招学校分数线
易捷尔高职单招
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科
大理科技管理学校|大理科技管理中等职业技术学校,大理市科技管理中等职业技术学校
大理科技管理学校
中源管业|中源管业,中源管业公司,中源管业有限公司,中源管业电话,中源管业地址,中源管业电力管,中源管业mpp电力管,中源管业cpvc电力管,中源管业pe穿线管
中源管业

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部