网站公告怎么做,wordpress手机 typecho,seo专业培训费用,重庆做CSS 背景
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} CSS中#xff0c;颜色值通常以以下方式定义:
十六进制 - 如#xff1a;#ff0000RGB - 如#xff1a;rgb(255,0…CSS 背景
背景颜色
background-color 属性定义了元素的背景颜色.
页面的背景颜色使用在body的选择器中: body {background-color:#b0c4de;} CSS中颜色值通常以以下方式定义:
十六进制 - 如#ff0000RGB - 如rgb(255,0,0)颜色名称 - 如red
以下实例中, h1, p, 和 div 元素拥有不同的背景颜色: h1 {background-color:#6495ed;} p {background-color:#e0ffff;} div {background-color:#b0c4de;} PS一般来说如果用的是好用点的文本编辑器这个颜色是可以直接选择的
背景图像
background-image 属性描述了元素的背景图像.
默认情况下背景图像进行平铺重复显示以覆盖整个元素实体.
页面背景图片设置实例: body {background-image:url(图片文件URL);} 背景图像 - 水平或垂直平铺
默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
一些图像如果在水平方向与垂直方向平铺这样看起来很不协调
下面可以使图像只在水平方向平铺 (repeat-x) body { background-image:url(图片文件URL); background-repeat:repeat-x; } 背景图像- 设置定位与不平铺
如果你不想让图像平铺你可以使用 background-repeat 属性: body { background-image:url(图片文件URL); background-repeat:no-repeat; } 以上实例中背景图像与文本显示在同一个位置为了让页面排版更加合理不影响文本的阅读我们可以改变图像的位置。
可以利用 background-position 属性改变图像在背景中的位置: 补充CSS3 多重背景(multiple backgrounds)
多重背景也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加缩写时为用逗号隔开的每组值用分解写法时如果有多个背景图片而其他属性只有一个例如background-repeat只有一个表明所有背景图片应用该属性值。
语法缩写如下 background [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],... 可以把上面的缩写拆解成以下形式 background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color; 注意 用逗号隔开每组 background 的缩写值 如果有 size 值需要紧跟 position 并且用 / 隔开 如果有多个背景图片而其他属性只有一个例如 background-repeat 只有一个表明所有背景图片应用该属性值。 background-color 只能设置一个。
CSS 文本效果
文字颜色
颜色属性被用来设置文字的颜色。
颜色是通过CSS最经常的指定
十六进制值 - 如: FF0000一个RGB值 - 如: RGB(255,0,0)颜色的名称 - 如: red
!DOCTYPE html
html
head
meta charsetutf-8
titletest/title
style
body {color:red;}
h1 {color:#00ff00;}
p.ex {color:rgb(0,0,255);}
/style
/headbody
h1这是标题 1/h1
p这是一个普通的段落。请注意,本文是红色的。页面中定义默认的文本颜色选择器。/p
p classex这是一个类为ex的段落。这个文本是蓝色的。/p
/body
/html
文本的对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
当text-align设置为justify每一行被展开为宽度相等左右外边距是对齐如杂志和报纸。
!DOCTYPE html
html
head
meta charsetutf-8
titletest/title
style
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
/style
/headbody
h1CSS text-align 实例/h1
p classdate2024.8.17/p
p classmain这是文本内容/p
pb注意/b 重置浏览器窗口大小查看 quot;justifyquot; 是如何工作的。/p
/body/html
文本修饰
text-decoration 属性用来设置或删除文本的装饰。
从设计的角度看 text-decoration属性主要是用来删除链接的下划线使界面更佳美观
!DOCTYPE html
html
head
meta charsetutf-8
titletest/title
style
a {text-decoration:none;}
/style
/headbody
p链接到: a hrefhttp://www.baidu.com/百度/a/p
/body/html
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母或每个单词的首字母大写。 p.uppercase {text-transform:uppercase;} p.lowercase {text-transform:lowercase;} p.capitalize {text-transform:capitalize;} 文本缩进
文本缩进属性是用来指定文本的第一行的缩进。 p {text-indent:50px;} 字体系列
font-family 属性设置文本的字体系列。
font-family 属性应该设置几个字体名称作为一种后备机制如果浏览器不支持第一种字体他将尝试下一种字体。
注意: 如果字体系列的名称超过一个字它必须用引号如Font Family宋体。
多个字体系列是用一个逗号分隔指明 p{font-family:Times New Roman, Times, serif;} 字体样式
主要是用于指定斜体文字的字体样式属性。
这个属性有三个值
正常 - 正常显示文本斜体 - 以斜体字显示的文字倾斜的文字 - 文字向一边倾斜和斜体非常类似但不太支持 p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;} 字体大小
font-size 属性设置文本的大小。
能否管理文字的大小在网页设计中是非常重要的。但是你不能通过调整字体大小使段落看上去像标题或者使标题看上去像段落。
请务必使用正确的HTML标签就h1 - h6表示标题和p表示段落
字体大小的值可以是绝对或相对的大小。
绝对大小
设置一个指定大小的文本不允许用户在所有浏览器中改变文本大小确定了输出的物理尺寸时绝对大小很有用
相对大小
相对于周围的元素来设置大小允许用户在浏览器中改变文字大小 如果你不指定一个字体的大小默认大小和普通文本段落一样是16像素16px1em。
设置字体大小像素
设置文字的大小与像素让您完全控制文字大小 h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} 上面的例子可以在 Internet Explorer 9, Firefox, Chrome, Opera, 和 Safari 中通过缩放浏览器调整文本大小。
虽然可以通过浏览器的缩放工具调整文本大小但是这种调整是整个页面而不仅仅是文本
用em来设置字体大小
为了避免Internet Explorer 中无法调整文本的问题许多开发者使用 em 单位代替像素。
em的尺寸单位由W3C建议。
1em和当前字体大小相等。在浏览器中默认的文字大小是16px。
因此1em的默认大小是16px。可以通过下面这个公式将像素转换为empx/16em
!DOCTYPE html
html
head
meta charsetutf-8
titletest/title
style
h1 {font-size:2.5em;} /* 40px/162.5em */
h2 {font-size:1.875em;} /* 30px/161.875em */
p {font-size:0.875em;} /* 14px/160.875em */
/style
/head
bodyh1This is heading 1/h1
h2This is heading 2/h2
pThis is a paragraph./p
p使用 em 单位允许在所有浏览器中调整文本大小。
不幸的是仍然是IE浏览器的问题。调整文本的大小时会比正常的尺寸更大或更小。
/p
/body
/html
在上面的例子em的文字大小是与前面的例子中像素一样。不过如果使用 em 单位则可以在所有浏览器中调整文本大小。
不幸的是仍然是IE浏览器的问题。调整文本的大小时会比正常的尺寸更大或更小。
使用百分比和EM组合
在所有浏览器的解决方案中设置 body元素的默认字体大小的是百分比
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
CSS 链接
不同的链接可以有不同的样式。
链接样式
链接的样式可以用任何CSS属性如颜色字体背景等。
特别的链接可以有不同的样式这取决于他们是什么状态。
这四个链接状态是
a:link - 正常未访问过的链接a:visited - 用户已访问过的链接a:hover - 当用户鼠标放在链接上时a:active - 链接被点击的那一刻
!DOCTYPE html
html
head
meta charsetutf-8
titletest/title
style
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
/style
/head
body
pba href/css/ target_blank这是一个链接/a/b/p
pb注意/b a:hover 必须在 a:link 和 a:visited 之后需要严格按顺序才能看到效果。/p
pb注意/b a:active 必须在 a:hover 之后。/p
/body
/html
当设置为若干链路状态的样式也有一些顺序规则
a:hover 必须跟在 a:link 和 a:visited后面a:active 必须跟在 a:hover后面
常见的链接样式
根据上述链接的颜色变化的例子看它是在什么状态。
让我们通过一些其他常见的方式转到链接样式
文本修饰
text-decoration 属性主要用于删除链接中的下划线
!DOCTYPE html
html
head
meta charsetutf-8
titletest/title
style
a:link {text-decoration:none;} /* unvisited link */
a:visited {text-decoration:none;} /* visited link */
a:hover {text-decoration:underline;} /* mouse over link */
a:active {text-decoration:underline;} /* selected link */
/style
/headbody
pba href/css/ target_blankThis is a link/a/b/p
pb注意:/b hover必须在:link和 a:visited之后定义才有效./p
pb注意:/bactive必须在hover之后定义是有效的./p
/body
/html
背景颜色
背景颜色属性指定链接背景色 a:link {background-color:#B2FF99;} /* 未访问链接 */ a:visited {background-color:#FFFF85;} /* 已访问链接 */ a:hover {background-color:#FF704D;} /* 鼠标移动到链接上 */ a:active {background-color:#FF704D;} /* 鼠标点击时 */
