CSS中基本元件的属性设置
版权声明:本文为博主原创文章,转载请注明出处。 https://blog.csdn.net/gongxifacai_believe/article/details/91355611
1、传统HTML设计网页版面的缺点
使用传统HTML控制标记来设计网页,在先天上就无法与排版样本来做比较,因为HTML并非完全着眼在网页排版的功能上,而这对XHTML而言更是如此,因为XHTML有意将原先HTML中有关网页版面的标记或属性遗弃不用,如<font>
,<center>
,color,background,bgcolor等等,所以对XHTML文件而言,其排版与显示的功能比HTML文件更弱,所以使用XHTML来设计网页更需要搭配CSS(Cascading Style Sheets,层叠式样式表)排版样本。
2、CSS的特点
HTML排版时的缺点:设置麻烦,修改麻烦,功能严重不足。 CSS样式排版的优点:排版属性功能完整,排版文件可以独立存在,可以共用排版文件。 CSS样式排版的分类:行内排版样式,内嵌式排版样式和链接式排版样式。
3、CSS的排版样式
(1)行内排版样式
格式:<标记名称 style=”属性 1:属性值1;属性 2:属性值2”>…</标记名称>
例:<p style=”font-size:20pt;color:red;text-align:center”>段落文字</p>
排版专用标记:<div>
与<span>
<div></div>
是块级元素,<span> </span>
是行内元素。
(2)内嵌式排版样式
内嵌式排版中所有的样式定义都必须在<style>...</style>
之间,而<style>...</style>
又必须在<head>...</head>
之间。
内嵌式排版样式可以分为三种:1)标记定义型;2)class 定义型;3)id 定义型。
1)标记定义型格式:
<head>
<style type=”text/css”>
标记名称{属性1:属性值1;属性2:属性值2;}
标记名称{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
2)class 定义型格式:
<head>
<style type=”text/css”>
.定义名称{属性1:属性值1;属性2:属性值 2;}
.定义名称1,.定义名称 2{属性1:属性值1;属性2:属性值 2;}
</style>
</head>
<body>
<标记名称 class=”定义名称”>…</标记名称>
</body>
3)id 定义型格式:
<head>
<style>
#定义名称{属性1:属性值1;属性2:属性值2;}
#定义名称 1,#定义名称 2{属性1:属性值1;属性2:属性值 2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
行内排版样式和内嵌式排版样式的优先级:CSS规定,范围越小,优先级越高。 按照优先级由小到大排列:标记定义型 < class定义型 < id定义型 < 行内排版样式。 (3)外部排版样式 独立的样式排版格式:
标记名称{属性1:属性值 1;属性2:属性值2;}
.定义名称{属性 1:属性值1;属性 2:属性值 2;}
在<head>…</head>
之间使用<link>
格式:
<head>
<link rel=”stylesheet” type=”text/css” href=URL />
</head>
在<head>…</head>
之间使用import格式:
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
4、 CSS 中的长度与颜色
长度单位 |
说明 |
---|---|
in |
英寸 |
cm |
厘米 |
mm |
毫米 |
ex |
以小写字母高度为单位(大部分不支持) |
pt |
磅,1pt=72英寸 |
pc |
派卡,1pc=12pt |
px |
像素(推荐使用) |
颜色名称 |
十六进制表示 |
三原色单位 |
---|---|---|
color:red |
color:#FF0000 |
rgb(255,0,0) |
color:green |
color:#00FF00 |
rgb(0,255,0) |
color:blue |
color:#0000FF |
rgb(0,0,255) |
color:black |
color:#000000 |
rgb(0,0,0) |
color:white |
color:#FFFFFF |
rgb(255,255,255) |
color:brown |
color:#A52A2A |
rgb(165,42,42) |
color:chocolate |
color:#D2691E |
rgb(210,105,30) |
color:cyan |
color:#00FFFF |
rgb(0,255,255) |
color:darkblue |
color:#00008B |
rgb(0,0,139) |
color:darkgray |
color:#A9A9A9 |
rgb(169,169,169) |
color:darkred |
color:#8B0000 |
rgb(139,0,0) |
color:firebrick |
color:#B22222 |
rgb(178,34,34) |
color:gold |
color:#FFD700 |
rgb(255,215,0) |
color:gray |
color:#808080 |
rgb(128,128,128) |
color:lightblue |
color:#ADD8E6 |
rgb(173,216,230) |
color:maroon |
color:#800000 |
rgb(128,0,0) |
color:olive |
color:#808000 |
rgb(128,128,0) |
color:orange |
color:#FFA500 |
rgb(255,165,0) |
color:pink |
color:#FFC0CB |
rgb(255,192,203) |
color:purple |
color:#800080 |
rgb(128,0,128) |
color:silver |
color:#C0C0C0 |
rgb(192,192,192) |
color:skyblue |
color:#87CEEB |
rgb(135,206,235) |
color:snow |
color:#FFFAFA |
rgb(255,250,250) |
color:tomato |
color:#FF6347 |
rgb(255,99,71) |
color:wheat |
color:#F5DEB3 |
rgb(245,222,179) |
color:yellow |
color:#FFFF00 |
rgb(255,255,0) |
5、 CSS 中的文字属性
属性名称 |
属性值 |
说明 |
---|---|---|
font-style |
normal |
正常显示 |
font-style |
italic |
斜体 |
font-variant |
normal |
正常显示 |
font-variant |
small-caps |
将英文大小写字母调为同宽 |
font-weight |
normal |
正常显示 |
font-weight |
bold |
粗体 |
font-size |
像素 |
字体大小 |
font-size |
百分比 |
字体大小 |
font-family |
字体名称 |
设置字体名称 |
font属性简化的使用方法:font:是否斜体 是否同宽 是否粗体 大小 字体名称;
例如:font:italic bold 200 隶书;
6、CSS中的文本属性
属性名称 |
属性值 |
说明 |
---|---|---|
color |
十六进制 |
颜色 |
color |
英文名称 |
颜色 |
color |
三原色单位 |
颜色 |
letter-spacing |
normal |
正常显示 |
letter-spacing |
长度 |
文本间隔 |
word-spacing |
normal |
正常显示 |
word-spacing |
数字 |
单词间距 |
white-space |
normal |
文本自动处理换行 |
white-space |
pre |
格式化显示文本 |
white-space |
nowrap |
强制在同一行显示 |
text-align |
left |
文字靠左 |
text-align |
right |
文字靠右 |
text-align |
center |
文字靠中 |
text-decoration |
none |
正常显示 |
text-decoration |
underline |
加下划线 |
text-decoration |
overline |
加顶线 |
text-decoration |
line-through |
加删除线 |
text-indent |
长度 |
首行缩进 |
text-indent |
百分比 |
首行缩进 |
line-height |
像素 |
行高 |
line-height |
数字/百分比 |
行高 |
text-transform |
none |
正常显示,可以包含大小写字符 |
text-transform |
capitalize |
字符串第一个字符大写 |
text-transform |
uppercase |
转换为大写字符 |
text-transform |
lowercase |
转换为小写字符 |
vertical-align |
sub |
设置文字为下标 |
vertical-align |
super |
设置文字为上标 |
vertical-align |
top |
文字向上端靠齐 |
vertical-align |
middle |
设置文字是在中线位置 |
vertical-align |
bottom |
文字往下端靠齐 |
7、CSS 中背景的使用
属性名称 |
属性值 |
说明 |
---|---|---|
background-attachment |
scroll |
设置背景图像会随视窗滚动条的移动而移动 |
background-attachment |
fixed |
设置背景图像不会随视窗滚动条的移动而移动 |
background-color |
十六进制 |
background-color:#ff0000; |
background-color |
英文名称 |
background-color:red; |
background-color |
三原色 |
background-color:rgb(255,0,0); |
background-color |
transparent |
background-color:transparent; 透明 |
background-image |
URL |
background-image:url(“bg.jpg”); 背景图片 |
background-image |
none |
不设置背景图片 |
background-position |
top left |
设置背景图案出现在上左方 |
background-position |
top center |
设置背景图案出现在上方中间 |
background-position |
top right |
设置背景图案出现在上右方 |
background-position |
center left |
设置背景图案出现在中间左方 |
background-position |
center center |
设置背景图案出现在中间 |
background-position |
center right |
设置背景图案出现中间右方 |
background-position |
bottom left |
设置背景图案出现在下左方 |
background-position |
bottom |
设置背景图案出现在正下方 |
background-position |
bottom right |
设置背景图案出现在下右方 |
background-repeat |
repeat |
将背景图案填满整个背景 |
background-repeat |
repeat-x |
将背景图案在水平方向添满 |
background-repeat |
repeat-y |
将背景图案在垂直方向添满 |
background-repeat |
no-repeat |
图案只出现一次 |
背景图案简化方案: background:颜色 背景图片 repeat attachment position;
8、CSS中列表的使用
属性名称 |
属性值 |
说明 |
---|---|---|
list-style-type |
none |
无符号 |
list-style-type |
disc |
实体的小圆点 |
list-style-type |
circle |
空心的小圆点 |
list-style-type |
square |
实心的小方块 |
list-style-type |
decimal |
1,2,3… |
list-style-type |
lower-roman |
i,ii,iii… |
list-style-type |
upper-roman |
I,II,III… |
list-style-type |
lower-alpha |
a,b,c,d,e… |
list-style-type |
upper-alpha |
A,B,C,D,E… |
list-style-position |
inside |
清单项目往右移 |
list-style-position |
outside |
清单项目正常显示 |
list-style-image |
URL |
list-style-image:url(lmk.gif); |
list-style-image |
none |
不会显示任何图象 |
清单的简化设置:list-style:circle inside url("bullet.gif");
9、CSS 中边框的使用
属性名称 |
属性值 |
说明 |
---|---|---|
border-color |
十六进制 |
可依序设置上,右,下,左线颜色 |
border-color |
英文名称 |
border-color:red; 四边均为红色 |
border-color |
三原色 |
border-color:red green; 上下为红色,左右为绿色border-color:red green blue; 上为红色、左右为绿色、下为蓝色border-color:red green blue yellow; 上右下左分别为红绿蓝黄 |
border-style |
none |
不显示边线 |
border-style |
dotted |
点线 |
border-style |
dashed |
虚线 |
border-style |
solid |
实线 |
border-style |
double |
双线 |
border-width |
宽度 |
border-width:0.2cm 0.3cm 0.4cm 0.5cm;border-width:1 2 3 4; |
简化方案:border:宽度 形态 颜色;
例如:border:1px solid black;
10、 CSS 中边界的使用
(1)padding系列属性
属性名称 |
属性值 |
说明 |
---|---|---|
padding-bottom |
长度/百分比 |
元件下端边线的空隙 |
padding-left |
长度/百分比 |
元件左端边线的空隙 |
padding-right |
长度/百分比 |
元件右端边线的空隙 |
padding-top |
长度/百分比 |
元件上端边线的空隙 |
简化写法:
padding:10px;
padding:2px 4px;
padding:2px 6px 10px;
padding:1px 2px 3px 4px;
(2)margin系列属性
属性名称 |
属性值 |
说明 |
---|---|---|
margin-bottom |
auto |
自动调整空隙 |
margin-bottom |
长度/百分比 |
设置下端空隙 |
margin-left |
auto |
自动调整空隙 |
margin-left |
长度/百分比 |
设置左端空隙 |
margin-right |
auto |
自动调整空隙 |
margin-right |
长度/百分比 |
设置右端空隙 |
margin-top |
auto |
自动调整空隙 |
margin-top |
长度/百分比 |
设置上端空隙 |
简化写法:
margin:2px 4px;
margin:2px 6px 10px;
margin:1px 2px 3px 4px;
常用网页顶格设置:margin:0;
- Visual Studio 2013 Web开发
- 初识Opserver,StackExchange的监控解决方案
- OstrichNet 简易统计信息收集工具
- 百度地图开发1
- 开源消息队列:NetMQ
- 自然语言处理如何检查拼写错误?(Tensorflow实例教程、源代码)
- 仿qq登录界面
- 搭建Linux+Jexus+MariaDB+ASP.NET[LJMA]环境
- WindowsMobile/Win Form-界面自适应
- 搜索附近人和商铺功能
- 通过Mono 在 Heroku 上运行 .NET 应用
- 百度地图聚合
- LVS DR模式 RealServer 为 Windows 2008 R2配置
- android画图之贝塞尔曲线讲解
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例