Loading

CSS 学习笔记 1

什么是 CSS?

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

CSS 语法

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

CSS声明总是以分号(;)结束，声明总以大括号({})括起来:

为了让CSS可读性更强，你可以每行只描述一个属性:

CSS注释以 /* 开始, 以 */ 结束,

CSS 选择器

 1. ID 选择器（ID selector，IS）：使用 # 标识selector，语法格式：#S{...}（S为选择器名）。

 2. 类选择器（class selector，CS）：使用 . 标识selector，语法格式：.S{...}（S为选择器名）。

 3. 元素选择器（element selector，ES）：又叫标签选择器，使用标签名作为selector名，语法格式：S{...}（S为选择器名）。

 4. 属性选择器（attribute selector，AS）：ES其实是AS的一个特例，在AS基础上还能对selector描述得更具体，语法格式为 E[attr[~=][|=][^=][$=][*=]VALUE]{...}，是并没有得到所有浏览器支持的选择器，因此不举例

 5. 包含选择器（package selector，PS）：指定目标选择器必须处在某个选择器对应的元素内部，语法格式：A B{...}（A、B为HTML元素/标签，表示对处于A中的B标签有效）。

 6. 子选择器（sub-selector，SS）：语法格式：A>B{...}（A、B为HTML元素/标签）。

 7. 兄弟选择器（brother selector，BS）：语法格式：A~B{...}（A、B为HTML元素/标签，表示A标签匹配selector的A，B标签匹配selector的B时，B标签匹配样式）

 8. 相邻选择器：语法格式：A+B{...}

 9. 通用选择器　语法形式为：*{属性：属性值}。

CSS 创建

外部样式表(External style sheet)

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

内部样式表(Internal style sheet)

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>

内联样式(Inline style)

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

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

 

优先级是浏览器是通过判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级仅由选择器组成的匹配规则决定的。

优先级就是分配给指定的CSS声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

优先级顺序

下列是一份优先级逐级增加的选择器列表：

  • 通用选择器（*）
  • 元素(类型)选择器
  • 类选择器
  • 属性选择器
  • 伪类
  • ID 选择器
  • 内联样式

!important 规则例外

当 !important 规则被应用在一个样式声明中时,该样式声明会覆盖CSS中任何其他的声明, 无论它处在声明列表中的哪里. 尽管如此, !important规则还是与优先级毫无关系.

使用 !important 不是一个好习惯，因为它改变了你样式表本来的级联规则，从而使其难以调试。

一些经验法则：

    • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important
    • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
    • Never 永远不要在全站范围的 css 上使用 !important
    • Never 永远不要在你的插件中使用 !important

多重样式优先级：
内联样式 > 内部样式表 > 外部样式表 > 浏览器样式表
CSS 优先规则：
内联样式 > id 选择器 > 类选择器 = 伪类选择器 = 属性选择器 > 标签选择器 = 伪元素选择器

CSS 背景

值说明CSS
background-color 指定要使用的背景颜色 1
background-size 指定背景图片的大小 3
background-origin 指定背景图像的定位区域 3
background-clip 指定背景图像的绘画区域 3
background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 1
background-image 指定要使用的一个或多个背景图像 1

背景颜色

CSS中，颜色值通常以以下方式定义:

十六进制 - 如："#ff0000"
RGB - 如："rgb(255,0,0)"
颜色名称 - 如："red"

背景图像
background-image 属性描述了元素的背景图像.

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。

background-position　　设置背景图像的起始位置。

值                                       描述
left top
center center
center bottom                    如果仅指定一个关键字，其他值将会是"center"
x% y%                               第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos                          第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit                                指定background-position属性设置应该从父元素继承

background-repeat　　设置背景图像是否及如何重复。repeat,repeat-x,repeat-y,no-repeat

CSS 文本格式

属性描述
color 设置文本颜色
direction 设置文本方向。
letter-spacing 设置字符间距
line-height 设置行高
text-align 对齐元素中的文本
text-decoration 向文本添加修饰
text-indent 缩进元素中文本的首行
text-shadow 设置文本阴影
text-transform 控制元素中的字母
unicode-bidi 设置或返回文本是否被重写 
vertical-align 设置元素的垂直对齐
white-space 设置元素中空白的处理方式
word-spacing 设置字间距 
/* 文本转换 */
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
/* 文本缩进 */
p {text-indent:50px;}
/* 指定字符之间的空间 */
h1 {letter-spacing:2px;}
h2 {letter-spacing:-3px;}
/* 指定行与行之间的空间 */
p.small {line-height:70%;}
p.big {line-height:200%;}
/* 设置元素的文本方向 */
div.ex1 {direction:rtl;}
/* 增加单词之间的空白空间 */
p{    word-spacing:30px;}
/* 在元素内禁用文字环绕 */
p{    white-space:nowrap;}
/* 垂直对齐图像 */
img.top {vertical-align:text-top;}

CSS 字体

font 在一个声明中设置所有的字体属性
font-family 指定文本的字体系列
font-size

指定文本的字体大小  p {font-size:14px;} h1 {font-size:2.5em;} 

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em
font-style

指定文本的字体样式   p.normal {font-style:normal;}  p.italic {font-style:italic;}
font-variant

以小型大写字体或者正常字体显示文本。  font-variant:small-caps;
font-weight

指定字体的粗细。

p.normal {font-weight:normal;} p.light {font-weight:lighter;}

 p.thick {font-weight:bold;} p.thicker {font-weight:900;}

CSS 链接

L(link)OV(visited)E  and  H(hover)A(active)TE

a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

CSS 列表 

 

list-style 简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image 将图像设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。

 

ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}

ul
{
    list-style-type:none;
    padding:0px;
    margin:0px;
}
ul li
{
    background-image:url(sqpurple.gif);
    background-repeat:no-repeat;
    background-position:0px 5px; 
    padding-left:14px;
}
View Code

 

posted @ 2020-12-09 07:57  然爸  阅读(61)  评论(0)    收藏  举报