小白的CSS笔记（二）样式

来源：互联网发布：淘宝直播有小黑屋编辑：程序博客网时间：2024/05/21 05:43

1、使用内部样式表的css代码都写在<style type="text/css"></style>，再放在head标签中，style标签的属性就是类型为css.

<head><style type=""text/css>body{background-color:red}h1  {background-color:blue}</style></head>

2、***html的<span>标签被用来组合行内元素，可以对span应用id选择器和类选择器，这样既可以增加span的语义，也方便对span的内容应用样式。

***一般情况下，class选择器应用于元素组，而id选择器应用于唯一的元素。

***background-image后面要用url（统一资源定位符）来表示图片的位置，且图片一般不用png格式。

***background-repeat缺省值为repeat，所以一般不希望背景图片重复的时候就设置他的值为no-repeat。

***可以通过控制行高来显示自己想要的完整的图片大小，line-height可以设置为120px，是用于设置行高的属性。

***为了图片的位置信息能够在firefox浏览器中正确的显示，必须将background-attachment的值设置为fixed。该属性可以保证背景图片不随页面的下滑而滑动。

3、文字的样式：

***text-indent可以让某一行文本缩进，一般作用于块级元素。如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。

该属性可以继承，在使用负缩进的时候建议同时设置内边距或者外边距。

***text-align是让元素中的文本相互对齐的一种方式，left，right，center分别代表文本左对齐，右对齐，居中。justify表示两端对齐的文本效果，会通过调整字间距和大小来得到。（然而我发现代入进去并没有实现所谓的两端对齐的效果。）

***word-spacing代表单词间隔，默认值为normal与0值相同。一般只对英文字母起作用，汉字貌似无用。

letter-spacing代表字母或字符间隔，其余的要求同word-spacing。

***text-transform表示将文本进行大小写的转换，值为none,uppercase,lowercase,capitalize.其中最后一个属性代表只将每个单词的首字母大写。

***text-decoration可以对文本进行特殊操作，值为none,underline,overline,line-through,blink.最后一个值可以让文本闪烁。blink颇受争议，亲测貌似无效。

***white-space属性设置为normal时会合并所有文本中的空白符并且忽略换行符。

其他可用的值有pre表示预格式，会按照标签之间的格式显示；用nowrap表示户可以换行除非出现<br></br>;

pre-line：不保留空白符，保留换行符并且允许自动换行。

pre-wrap：保留空白符和换行符，并且可以允许自动换行。

4、文字的字体

Attention！有关字体的设置应该放在相关段落字体设置的最前面，否则不显示。

***通用字体系列font-family有5种：Serif（衬线字体）,Sans-serif（无衬线字体）,Monospae（等宽字体）,Cursive（草书）,Fantasty（梦幻字体）.设置字体以后不同的浏览器会从字体序列中依次选择本机装有的字体。

字体名称中含有空格，#，$时，需要加引号表示字体名称。

***字体风格font-style:normal,italic(斜体),oblique(倾斜)，斜体是通过改变字体的结构而产生的倾斜外观，而倾斜只是单纯的将线条倾斜。

***font-variant:可以设定小型大写字母,small-caps.

***font-weight:将字体加粗，normal(400),bold(700),加粗的等级也可以用100~900来表示。

***font-size:可以使用绝对值和相对值。普通文本的大小是16px=1em；（注解：em是一个相对度量单位，它代表一个页面中特殊字体的大写M的高度，可以衡量当前页面的字体大小。一般与px的转换关系为1em=16px，若页面本身的字体大小为a px,则转换关系就是1em=a px。）

鉴于单纯的使用px或者em设置字体大小会因为不同的浏览器而影响我们具体的文本效果，因此我们一般采用100%对body元素（即父元素）设置大小，再使用em对body中的子文本设置大小。

5、链接的样式

***链接的状态分为4种，link（普通未被访问的链接） visited（已经被访问的链接） hover（鼠标指针位于链接的上方） active（链接被点击的时刻）

注：html中的<a></a>标签，用于创建超链接，href属性用于指定要链接到的资源的url。

链接的4种状态除了通过字体颜色背景下划线等区分以外，还可以将超链接做成一个方框。（注：display可以生成行内文本框，block是将其设计为块级元素。）

0 0