软件下载

css是什么语言?Web前端CSS布局讲解

软件下载 投稿 2022-03-06 09:19:31 浏览
什么是CSS?

Cascading Style SheetkGE求资源网-免费绿色汉化软件分享平台

层叠样式表语言(不是编程语言,属于样式表语言,没有变量、数据类型、控制语句...)kGE求资源网-免费绿色汉化软件分享平台

CSS其实是专门用来修饰HTML的,让HTML更好看。kGE求资源网-免费绿色汉化软件分享平台

CSS是HTML的化妆品。kGE求资源网-免费绿色汉化软件分享平台

CSS是为HTML服务的,所以HTML还是主体,CSS是依附在HTML上的,kGE求资源网-免费绿色汉化软件分享平台

所以进行CSS的开发,我们还是需要新建html/htm文件。kGE求资源网-免费绿色汉化软件分享平台

在HTML中怎么嵌入CSS样式呢?

第一种方式:内联定义kGE求资源网-免费绿色汉化软件分享平台

第二种方式:定义内部样式块对象kGE求资源网-免费绿色汉化软件分享平台

第三种方式:链入外部样式表文件(这种方式最常用!)kGE求资源网-免费绿色汉化软件分享平台

关于选择器的优先级: 标签选择器优先级最低。 其次是类选择器。 最高优先级是id选择器。 CSS设置背景(background) 背景颜色 background-color 背景图片 background-image 背景重复 background-repeat:repeat-x/repeat-y 背景位置 background-position:bottom/left/top/right/center 背景关联 background-attachment:fixed/scroll

综合写法:kGE求资源网-免费绿色汉化软件分享平台

.tagName{background:#ffffff url(“aa.jpg”) no-repeat right left;} CSS设置文本格式

通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。kGE求资源网-免费绿色汉化软件分享平台

文本缩进 :Text-indent:2emkGE求资源网-免费绿色汉化软件分享平台

文本对齐方式:kGE求资源网-免费绿色汉化软件分享平台

Text-align:left/right/center/ justifykGE求资源网-免费绿色汉化软件分享平台

文本修饰:kGE求资源网-免费绿色汉化软件分享平台

Text-decoration:underline/line-through/overline/nonekGE求资源网-免费绿色汉化软件分享平台

字符间距:Word-spacing:px/em 英文单词之间的间隔;kGE求资源网-免费绿色汉化软件分享平台

Letter-spacing:px/em汉字和英文字母之间的间隔;kGE求资源网-免费绿色汉化软件分享平台

文本转换:kGE求资源网-免费绿色汉化软件分享平台

Text-transform:uppercase/lowercase/ capitalizekGE求资源网-免费绿色汉化软件分享平台

行与行间距:Line-height:px/%kGE求资源网-免费绿色汉化软件分享平台

垂直对齐图像: vertical-align:text-top/text-bottomkGE求资源网-免费绿色汉化软件分享平台

文本阴影:text-shadow:水平偏移,垂直偏移 颜色kGE求资源网-免费绿色汉化软件分享平台

字体

字体类型:font-family:”sans-serif”;kGE求资源网-免费绿色汉化软件分享平台

字体样式:font-style:normal ;kGE求资源网-免费绿色汉化软件分享平台

字体大小kGE求资源网-免费绿色汉化软件分享平台

:font-size:20px/3.75em/100%;默认大小为16px,字体为宋体kGE求资源网-免费绿色汉化软件分享平台

字体加粗:font-weight:normal;kGE求资源网-免费绿色汉化软件分享平台

字体的转变kGE求资源网-免费绿色汉化软件分享平台

:font-variant:normal/smallcaps;kGE求资源网-免费绿色汉化软件分享平台

CSS链接

链接的四种状态kGE求资源网-免费绿色汉化软件分享平台

a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */

【注意】当为链接的不同状态设置样式时,请按照以下次序规则:kGE求资源网-免费绿色汉化软件分享平台

a:hover 必须位于 a:link 和 a:visited 之后kGE求资源网-免费绿色汉化软件分享平台

a:active 必须位于 a:hover 之后kGE求资源网-免费绿色汉化软件分享平台

去掉a链接默认的下划线kGE求资源网-免费绿色汉化软件分享平台

text-decoration:{none/underline}kGE求资源网-免费绿色汉化软件分享平台

a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}

创建链接块kGE求资源网-免费绿色汉化软件分享平台

display:block;kGE求资源网-免费绿色汉化软件分享平台

列表样式

在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。kGE求资源网-免费绿色汉化软件分享平台

要修改用于列表项的标志类型,可以使用属性 list-style-type:kGE求资源网-免费绿色汉化软件分享平台

ul {list-style-type : square;}

上面的声明把无序列表中的列表项标志设置为方块。kGE求资源网-免费绿色汉化软件分享平台

列表项图像kGE求资源网-免费绿色汉化软件分享平台

你可能想对各标志使用一个图像,这可以利用 list-style-image 属性做到:kGE求资源网-免费绿色汉化软件分享平台

ul li {list-style-image : url(xxx.gif);}

列表标志位置kGE求资源网-免费绿色汉化软件分享平台

ul{ list-style-position:inside; } CSS表格

表格边框kGE求资源网-免费绿色汉化软件分享平台

table,th,td{border:1px solid red;}

折叠边框kGE求资源网-免费绿色汉化软件分享平台

border-collapse:collapse; 表格的宽度和高度

width,heightkGE求资源网-免费绿色汉化软件分享平台

表格的文字水平对齐

text-align:center/right/left;kGE求资源网-免费绿色汉化软件分享平台

表格的文字垂直对齐

vertical-align:bottom;kGE求资源网-免费绿色汉化软件分享平台

表格的内边距

paddingkGE求资源网-免费绿色汉化软件分享平台

表格的背景颜色

backgroundkGE求资源网-免费绿色汉化软件分享平台

盒子模型 还不知道什么是CSS?超详细Web前端CSS布局讲解

margin: 包括margin-top, margin-right, margin-bottom, margin-left, 控制块级元素之间的距离, 它们是透明不可见的。kGE求资源网-免费绿色汉化软件分享平台

根据上, 右, 下, 左的顺时针规则, 简写为kGE求资源网-免费绿色汉化软件分享平台

margin: 40px 40px 40px 40px;kGE求资源网-免费绿色汉化软件分享平台

为便于记忆, 请参考下图:kGE求资源网-免费绿色汉化软件分享平台

还不知道什么是CSS?超详细Web前端CSS布局讲解

当上下, 左右margin值分别一致, 可简写为:kGE求资源网-免费绿色汉化软件分享平台

margin: 40px 40px;kGE求资源网-免费绿色汉化软件分享平台

前一个40px代表上下margin值, 后一个40px代表左右margin值.kGE求资源网-免费绿色汉化软件分享平台

当上下左右margin值均一致, 可简写为:kGE求资源网-免费绿色汉化软件分享平台

margin: 40px;kGE求资源网-免费绿色汉化软件分享平台

padding: 包括padding-top, padding-right, padding-bottom, padding-left, 控制块级元素内部, content与border之间的距离kGE求资源网-免费绿色汉化软件分享平台

【注意】当你想让两个元素的content在垂直方向(vertically)分隔时, 既可以选择padding-top/bottom, 也可以选择margin-top/bottom, 在此建议你尽量使用padding-top/bottom来达到你的目的, 这是因为css中存在Collapsing margins(折叠的margins)的现象.kGE求资源网-免费绿色汉化软件分享平台

边框 边框样式:border-style:none/dotted/dashed/solid/double/groove/ridge/inset/outset/hidden 边框宽度:border-width 边框颜色:border-color

综合写法:kGE求资源网-免费绿色汉化软件分享平台

border:1px solid red; 轮廓(outline)

可以按顺序设置如下属性:kGE求资源网-免费绿色汉化软件分享平台

outline-color outline-style outline-width CSS所有尺寸 宽度

width/min-width/max-widthkGE求资源网-免费绿色汉化软件分享平台

高度

height/min-height/max-heightkGE求资源网-免费绿色汉化软件分享平台

行高

line-heightkGE求资源网-免费绿色汉化软件分享平台

display显示类型

隐藏元素—–display:none或者visibility:hidddenkGE求资源网-免费绿色汉化软件分享平台

display通常可以设置为none、inline、blockkGE求资源网-免费绿色汉化软件分享平台

visibility通常可以设置为hidden、visiblekGE求资源网-免费绿色汉化软件分享平台

二者的区别在于display会将元素隐藏掉,并且位置不再被占据,而visibility则是占据原来的位置。kGE求资源网-免费绿色汉化软件分享平台

CSS块级元素和内联元素—kGE求资源网-免费绿色汉化软件分享平台

-display:block/inline/inline-block;kGE求资源网-免费绿色汉化软件分享平台

CSS定位(position)

position 属性值的含义:kGE求资源网-免费绿色汉化软件分享平台

statickGE求资源网-免费绿色汉化软件分享平台

元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。kGE求资源网-免费绿色汉化软件分享平台

relativekGE求资源网-免费绿色汉化软件分享平台

元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。kGE求资源网-免费绿色汉化软件分享平台

absolutekGE求资源网-免费绿色汉化软件分享平台

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。kGE求资源网-免费绿色汉化软件分享平台

fixedkGE求资源网-免费绿色汉化软件分享平台

元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。kGE求资源网-免费绿色汉化软件分享平台

CSS浮动

设置浮动:float:left/right;kGE求资源网-免费绿色汉化软件分享平台

清除浮动:kGE求资源网-免费绿色汉化软件分享平台

clear:both/left/right/null;kGE求资源网-免费绿色汉化软件分享平台

浮动的两个影响因素:1、文档流 2、显示类型kGE求资源网-免费绿色汉化软件分享平台

元素内容溢出 溢出滚动条

overflow:scroll(不管是否溢出都会有滚动条)、auto(自动添加)kGE求资源网-免费绿色汉化软件分享平台

溢出隐藏

overflow:hidden;kGE求资源网-免费绿色汉化软件分享平台

CSS的相关特性

1、继承性kGE求资源网-免费绿色汉化软件分享平台

它不仅允许样式应用于某个特定的html标签元素,而且还可引用于其后代;kGE求资源网-免费绿色汉化软件分享平台

2、CSS层叠kGE求资源网-免费绿色汉化软件分享平台

当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,后面的CSS样式会覆盖前面的样式。kGE求资源网-免费绿色汉化软件分享平台

总而言之:内联样式表(标签内部)>嵌入样式表(当前文件中)>外部样式表(外部引入文件)kGE求资源网-免费绿色汉化软件分享平台

更多资源请访问:四零四软件下载站423下载站

「真诚赞赏,手留余香」

求资源网

真诚赞赏,手留余香

使用微信扫描二维码完成支付

继续浏览有关教程的文章
发表评论
留言与评论(共有 0 条评论)
   
验证码:
版权声明

求资源网所发布的一切破解补丁,软件,以及其他分析文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途。
否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。