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 条评论

暂无评论

热门产品

php编程基础教程.pptx|php编程培训,php,编程,基础,教程,pptx
php编程基础教程.pptx

历史上的今天:04月28日

referrer策略和meta标签的问题

referrer策略和meta标签的问题请求后端接口时,banner图片的请求出现403错误:GEThttp://xxxxxxxxxxxx403(Forbidden)。在网上搜寻一番,解决方法如下:在index.html中的head中添加&lt;meta name=&quot;referrer&quot; content=&quot;no-referrer&quot; /&gt;。在此之前,关于r

热门专题

卓越综合高中|卓越综合高中
卓越综合高中
外贸网站建设|外贸网站建设,英文网站制作,英文网站设计,美国主机空间,外贸建站平台,多语言网站制作
外贸网站建设
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
云南开放大学|云南开放大学报名,云南开放大学报考,云南开放大学,什么是云南开放大学,云南开放大学学历,云南开放大学学费,云南开放大学报名条件,云南开放大学报名时间,云南开放大学学历,云南开放大学专业
云南开放大学
APP开发|app开发_app开发公司_app软件开发_专业app开发_云南app开发公司_app定制_原生app开发定制
APP开发
国家开放大学|国家开放大学报名,国家开放大学报考,国家开放大学,什么是国家开放大学,国家开放大学学历,国家开放大学学费,国家开放大学报名条件,国家开放大学报名时间,国家开放大学学历,国家开放大学专业
国家开放大学
自考本科|自考本科有用吗,自考文凭,自考本科文凭,自考文凭有用吗,自考本科文凭有用吗,自考文凭承认吗
自考本科

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部