20180503 CSS 学习笔记

最新推荐文章于 2024-05-30 14:49:04 发布

zebra105sl

最新推荐文章于 2024-05-30 14:49:04 发布

阅读量84

点赞数

分类专栏： CSS 文章标签： CSS

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS = “Cascading Style Sheets” #层叠样式表

css.功能 == print（"样式定义如何显示HTML"）

Css.实例 Css.instance

Selector { Declaration } => Selector { Property1:Value1;Property2:Value2; }

eg: h1{ color:red;text-align:center; }

eg2: h1

{

color:red;

text-align:center;

}

CSS 注释

eg: /* This is a document */

CSS Id 和 Class选择器（Selector）

#Id 可以为标有特定id的HTML元素指定特定的样式

eg： #Id { color:red; } #note:ID 属性不要以数字开头，数字开头的ID在 Mozilla/FireFox 浏览器中不起作用。

.class 用于描述一组元素的样式，class Selector 有别于Id选择器， Class可以在多个元素中使用。

eg: # .class {color:red; } instance p.center { text-align:center; }

note:类名的第一个字符不能使用数字! 它无法在 Morzilla/FireFox z中起作用。

CSS创建

如何插入样式表

1.外部样式表 <head><link rel="stylesheet" type="text/css" herf="mystyle.css"></head>

/* 浏览器会从文件 mystyle.css中读取到样式声明，并根据它来格式文档。*/

2.内部样式表 <head><style>hr{ color:sienna; }p{ margin-left:20px; }</style></head>

/* 当单个文档需要特殊样式时，就应该使用内部样式表。可以使用<style>标签在文档头部定义内部样式表。*/

3.内联样式 <p style="color:red;margin-left:20px;"> This is a paragraph.</p>

/* 当样式仅需要在一个元素上应用一次时使用。*/

多重样式

/*如果某些属性在不同的样式表中被同样的的选择器 Seletor 定义，那么属性值将从更具体的样式表中被继承过来*/

eg： 外部样式 h3{color:red; text-align:left;font-size:8pt;}

内部样式 h3{text-align:right;font-size:20pt;}

内部样式和外部样式同时链接。 result h3{ color:red;text-align:right;font-size:20pt;}

层叠次序

内联样式（HTML元素内部）>内部样式表（位于<head>标签内部）>外部样式表>浏览器缺省设置。

CSS Backgrounds (背景)

background-color # body{background-color：red(颜色)/ #b0c4de（16进制）/rgb(255,0,0)(RGB方式);}

background-image # body{background-image:url('image.gif');}

background-repeat # body{background-image:url('image.gif');background-repeat:repeat-x;}

background-attachment # 是否固定图片置 body{background-image:url('image.gif');background-attachment:fixed;}

background-position#body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;}

CSS Text (文本)

文本颜色 text-color # p{text-color:red;}

对齐方式 text-align # p{text-align:center;} {text-align property:center,right,justify？}

文本修饰 text-decoration # 从设计的角度来看，这个属性主要是用来删除链接的下划线

a{text-decoration:none} {text-decoration property:none无划线;overline 上划线;line-through 中划线;underline;下划线

文本转换text-transform#p.uppercase{text-transform:uppercase;}{text-transform property:uppercase;lowercase;capitalize;}

文本缩进 text-indent # p{text-indent:20px;}

属性	描述
color	设置文本颜色
direction	设置文本方向。
letter-spacing	设置字符间距
line-height	设置行高
text-align	对齐元素中的文本
text-decoration	向文本添加修饰
text-indent	缩进元素中文本的首行
text-shadow	设置文本阴影
text-transform	控制元素中的字母
unicode-bidi
vertical-align	设置元素的垂直对齐
white-space	设置元素中空白的处理方式
word-spacing	设置字间距

CSS Font

所有CSS字体属性

Property	描述
font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。