笔记3

来源：互联网发布：js empty 编辑：程序博客网时间：2024/05/16 13:46

引入外部文件
<link href="outer.css" rel="stylesheet" type="text/css"></link>
HTML文档中使用<link>元素引入外部样式文件，引入外部样式文件应在<head>元素中增加
<link>子元素。
导入外部样式单
<style type="text/css">
@import "../outer.css";
@import url('outer.css');
</style>
导入外部样式表单需要在<style>元素中执行@import进行导入。
区块元素
总是在新的一行上显示。
高度、行高、宽度、内边距、外边距等都是可控制的。
内联元素
内联元素和其他的元素显示在一行上。
上下边距、高度，宽度都是不可改变的，他的宽度是根据他的显示文本和图像的宽度。
HTML <div>元素是块级元素，它可用于组合其他HTML元素的容器。
HTML <span>元素是内联元素，可用作文本的容器
通配符选择器
使用"*"表示通配符，用来选择页面所有元素的样式。
*{ margin:0;
padding:0;}
类选择器
类选择器指定的样式对指定class属性的元素起作用。使用“.”标识一个类选择符，类名可以任
意。
.myclass{...}
ID选择器
ID选择器中的样式会对具有指定id属性的HTML元素起作用。
HTML元素以id属性来设置id选择器,CSS中id选择器以"#"来定义。
需要注意的是id在HTML文档中具有唯一性，是不可以重复的。
#idValue{ ...}
包含选择器
包涵选择器用于指定处于某个选择器对应的内部元素。
h1 em {color:red;}
子选择器
子选择器要求目标选择器必须作为外部选择器对应的元素的直接子元素。
选择器
13
parent>child{width: 200px; height: 35px;}
<style>
</style>
<div class="a">
<p>A smooth, mild <span class="b">blend of coffees</span> from Mexico, </p>
<div>A smooth, <p>mild</p>mild</div>
</div>
群组选择器
群组选择器使用逗号对选择符进行分隔。
h1,p,myClass,#main{
font-size:20px;
}
anchor伪类
链接的不同状态都可以以不同的方式显示。
<style>
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
</style>
first-child伪类
:first-child CSS 伪类代表了一组兄弟元素中的第一个元素。被匹配的元素需要具有一个父级元
素。
first-line伪类
"first-line" 伪元素用于向文本的首行设置特殊样式。
下面的属性可应用于 "first-line" 伪元素：
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
:before伪类
":before" 伪元素可以在元素的内容前面插入新内容。
背景颜色
background-color 属性定义了元素的背景颜色。
页面的背景颜色使用在body的选择器中:
body {background-color:#b0c4de;}
背景图片
background-image 属性描述了元素的背景图像。
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体。
background:url(img_flwr.gif);
背景平铺重复设置
background-repeat属性控制背景图像的平铺重复效果。
背景图片固定
在默认情况下，组件里的背景图片会随着滚动条的滚动而自动滚动，我们要把backgrounattachment的属性设为fixed,那么背景图片就会被固定在该组件中，不会随滚动条的滚动而移
动。
body{background-attachment: fixed;}
背景图片的定位
可以利用 background-position 属性改变图像在背景中的位置。
背景图片大小
background-size属性指定背景图片大小。
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
背景的简写属性
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background":
当使用简写属性时，属性值的顺序为：
background-color
background-image
background-repeat
background-attachment
background-position
以上属性无需全部使用，你可以按照页面的实际需要使用
文本的水平对齐方式
文本排列属性是用来设置文本的水平对齐方式。
文本可居中或对齐到左或右,两端对齐.
文本修饰
text-decoration属性一般用于删除链接的下划线。
文本转换
文本转换属性是用来指定在一个文本中的大写和小写字母。
可用于所有字句变成大写或小写字母，或每个单词的首字母大写。
文本缩进
text-indent属性控制首行文本的缩进。
属性值可以是固定值（包括负数），也可是百分比。
字符间距和字间距
letter-spacing属性控制字符的间距。属性值可以是正负数。
word-spacing属性控制字间距。
行间距
line-height属性控制行间距（简称行高）。

阅读全文

0 0