J2EE 之 css 总结

最新推荐文章于 2024-03-31 22:35:47 发布

gaohongijj

最新推荐文章于 2024-03-31 22:35:47 发布

阅读量965

点赞数

本文链接：https://blog.csdn.net/gaohongijj/article/details/8249641

版权

阶段总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS：
级联样式表：由w3c组织制定；html用于显示网页内容，css用于显示网页格式；

很多网站换皮肤就是，选择不同的css文件；

div+css是目前一种比较流行的网页布局技术；
div用来显示要显示的数据，css是用来显示布局样式；
网页设计的三个时期：
1.table时期
2.table+css时期
3.div+css时期（table还在用）
搜索引擎关心的是内容；

样式表：
1.内联样式表：
<select style="width:100px" />
<td style="width:80px;background:red" />
2.内部样式表：
<head>
<style>
td{ width:80px;}
</style>
</head>
3.外部样式表：
一个.css文件；

常用的样式属性：
文本：
1.color: color_name|#rrggbb
2.font-size:像素值默认字体大小16px：
3.font-weight:normal|bold;字体正常或粗体
4.font-style:normal|italic 正常或斜体
5.text-decoration:none|underline|line-throgh
文本的样式属性：
1.text-align:left|center|right
2.line-height:像素值
区块的属性：
1.width：2.height： min-height：最小的高度
背景样式属性：
1.background-corlor:colorName|#rrggbb
2.background-image:url(图像路径) 有空格或中文加上引号，图片默认重复显示
3.background-repeat:repeat|no-repeat|repeat-x|repeat-y
4.background-position:left|center|right|top|bottom
background-position:value1 水平偏移value1，垂直偏移50%
background-position:value1 value2 水平偏移value1，垂直偏移value2
复合背景样式属性
background：#c8c8c8;
background:url(图像路径) no-repeat;
background:url(图像路径) no-repeat 20px;

内联样式表：
<style>
html选择器：td{}
id选择器： #id{}
类选择器： .class{}
上下文选择器：#id td{}; .class td{}
伪类选择器：selector:link|hover|active|active|visited{}
</style>

css的盒模型：有border，padding，margin等属性的元素。（table,input,div,p）

border:width style color
padding:length 上下左右
length1 length2 上下左右
l1 l2 l3 上左右下
l1 l2 l3 l4 上右下左（顺时针）

margin:length;
margin-top,margin-right,margin-bottom,margin-left;

跟布局相关的样式属性
1.display：block|inline|none (指定元素在页面上不显示，不保留位置)
2. visibility:inherit 继承父元素的可见性
visible 使元素可见
hidden 使元素隐藏（保留位置）
3.clear: left 清除左边的浮动元素
right 清除右边的浮动元素
both 清除两边的浮动元素
外链样式
<head>
<link type="text/css" rel="stylesheet" href="外部css文件的目录"/>
</head>

type：外部样式表的格式
rel: 解析方式为stylesheet
href: 样式表的路径，可以是相对路径，也可以是绝对路径；

不同样式表的优先级：
内联样式>内部样式表>外部样式表