CSS学习笔记

最新推荐文章于 2025-08-11 21:51:50 发布

原创最新推荐文章于 2025-08-11 21:51:50 发布 · 398 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

学习笔记专栏收录该内容

2 篇文章

订阅专栏

2017.03.17
一、CSS是什么？
CSS 指层叠样式表 (Cascading Style Sheets)，外部样式表通常存储在 CSS 文件中。
样式的优先级顺序：
浏览器缺省设置<外部样式表<内部样式表（位于<head>标签内部）<内联样式（在 HTML 元素内部）。

二、CSS规则
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。
如图所示
如图中所示，可以有多个声明，声明之间用分号隔开，可以跨行写向C语言一样，不过分号仅表示分隔。此外，选择器也可以有多个，可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。选择器之间用逗号隔开，语法如下：
h1,h2,h3,h4,h5,h6 {
color: green;
}

三、派生选择器
派生选择器允许根据文档的上下文关系来确定某个标签的样式，基本方法就是，选择器为“大标签小标签”，后面写声明，这表示的是当小标签在大标签内时将使用声明的样式，否则用小标签本来的样式。例如：
li strong {
font-style: italic;
font-weight: normal;
}
当strong单独使用时表示粗体字，当strong标签在li内时，表示斜体字不加粗。当li单独使用时表示普通字体。

四、id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
用法：#red {color:red;}
<p id="red">这个段落是红色。</p>
id 属性只能在每个 HTML 文档中出现一次，但是可以结合派生选择器用这个id处理多个标签，例如：同时定义#sidebar p {;}和#sidebar h2 {}。

五、类选择器
类选择器和id选择器类似，只需将“#”换为“.”，id改为class即可，注意类名的第一个字符不能使用数字。例子：

.center {text-align: center}
<h1 class="center">
This heading will be center-aligned
</h1>

类选择器也可以结合派生选择器进行使用。

六、属性选择器
属性选择器在为不带有 class 或 id 的表单设置样式时特别有用。（这句怎么理解？表单<form> 不能用class和id吗？）
属性选择器为title属性的所有元素设定样式的例子如下：
[title]{;}或[title=someword]{;}或者[title~=someword]{;}

七、创建CSS
即如何插入样式表。在HTML学习中知道样式主要有三种：外部样式、内部样式和内联样式。
外部样式：

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

内部样式：

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

内联样式：（不建议）

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

当外部样式和内部样式同时存在时，优先继承内部元素，再继承外部元素。

2017.03.21
Q：派生选择器和id选择器搭配使用的时候，id应该在前还是在后，有什么区别？
一、CSS背景
1. 可以使用background-color属性为元素设置背景色；
2. 要把图像放入背景，需要使用background-image属性，需要加url。
格式：body {background-image: url(/i/eg_bg_04.gif);}
Q：所有的背景属性都不能继承这个怎么理解？
3. 如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。值有三种：repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
4. 可以利用 background-position 属性改变图像在背景中的位置。值可以用关键字比如top、bottom、left、right 和 center，也可以直接用具体数值或者百分比。
5. background-attachment:fixed防止背景随文本滚动。

二、CSS文本属性
通过文本属性可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进等。
1. 缩进：p {text-indent: 5em;}可取负值，前面加 padding-left: 5em。注意缩进属性是可以继承的，所谓继承就是在大标签下定义的缩进同样对小标签管用。
2. 水平对齐：text-align，值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
3. 大小写：text-transform，值uppercase 和 lowercase 将文本转换为全大写和全小写字符，capitalize 只对每个单词的首字母大写。

三、CSS字体
1. 指定字体： font-family 属性，最好加一个通用的作为预留选项。
2. 斜体：font-style 属性，值normal（正常）italic/oblique(文本倾斜显示）。
3. 粗细：font-weight 属性，值100~900，或 400 等价于 normal，而 700 等价于 bold。
4. 大小：font-size 属性，1em = 16px，浏览器默认值16像素。

四、CSS链接
链接有四种状态，可以为每种状态定义不同的颜色（或上述别的属性），方法如下：
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
注意：a:hover 必须位于 a:link 和 a:visited 之后；a:active 必须位于 a:hover 之后。

五、CSS列表属性
1. 列表类型: list-style-type属性，如 ul {list-style-type : square}把无序列表中的列表项标志设置为方块。
2. 列表项图像：list-style-image 属性，如 ul li {list-style-image : url(xxx.gif)}。
3. 列表标志位置： list-style-position 属性。
4. 简写列表样式：li {list-style : url(example.gif) square inside}。

六、CSS表格
1. 表格边框：
table{border-collapse:collapse;} //如果没有这行则显示双边框。
table,th, td{border: 1px solid black;}
2. 表格宽度和高度：width 和 height 属性。
3. 表格对齐：text-align （水平）和 vertical-align（垂直）属性。

2017.03.22
一、CSS框模型
CSS框模型如下：
这里写图片描述
注意：背景应用于上图中由内容和内边距、边框组成的区域。

二、内边距
内边距用padding属性，分为上下左右四个内边距，如：
h1 {padding: 10px 0.25em 2ex 20%;} 表示h1的上下左右边距，注意数值中间是空格不是逗号，如果只给第一个数值10px表示上下左右都是10px。
也可以用padding-top、padding-right、padding-bottom、padding-left属性。

三、边框(border)
1. 边框的样式：border-style属性，如 p.aside {border-style: solid dotted dashed double;} 分别是一个段落的上下左右边框的样式，同样可以用border-top-style等四个属性表示。
2. 边框的宽度：border-width属性，值为thin、medium、thick，分别对应2px、3px、5px。注意宽度属性必须建立在有样式的前提下，否则无法显示，即前面必须有style属性。
3. 边框的颜色：border-color属性。

四、外边距(margin)
外边距上右下左的顺序：h1 {margin : 10px 0px 15px 5px;}。
外边距最好用margin-top、margin-right、margin-bottom、margin-left属性分别给出，否则缺省时对应关系容易发生错乱。

五、定位
定位定义了元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。用position属性，值包括static、relative、absolute、fixed。
1. 相对定位：relative。相对于起点的偏移，position指定为relative后，给出相对上下左右的偏移距离。注意：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间，而且偏移后它可能会覆盖别的边框。
2. 绝对定位：absolute。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

六、CSS浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。float:right 或者 float:left。

2017.03.23
一、分组
将选择器分组和声明分组两者组合使用，是不错的选择。
通配符选择器：* {color:red;}。这个声明等价于列出了文档中所有元素的一个分组选择器。利用通配选择器，只需敲一次键（仅一个星号）就能使文档中所有元素的 color 属性值指定为 red。

二、类选择器
1. “.important {color:red;}”实际上等价于“*.important {color:red;}”，通配符被省略掉了，表示所有的元素都可以用class来引用这个选择器。
2. 一般用法：p.important {color:red;}
3. 多类选择器：
.important {font-weight:bold;}
.warning {font-style:italic;}
.important.warning {background:silver;}
若class=”important warning “表示包含上述三个属性。（实际上，没有第三行的情况下也是起作用的，表示包含两个属性，注意中间是空格）

三、id选择器
1. “#intro {font-weight:bold;}”实际上等价于“*#intro {font-weight:bold;}”，通配符被省略掉了。
2. 与类选择器的区别：
（1）只能在文档中使用一次；（？）
（2）不能结合使用，因为 ID 属性不允许有以空格分隔的词列表；
（3）能包含更多的含义。（？）

四、属性选择器
1. *[title] {color:red;}等价于[title] {color:red;}，同样省略通配符。在使用的时候，给出 title=“”即可，引号内的可以省略或任意。但是，如果使用有具体属性值的选择器，则必须与该值一致。
2. 根据部分属性值选择：img[title~=”Figure”] {border: 1px solid gray;}。这个规则会选择 title 文本包含 “Figure” 的所有图像。没有 title 属性或者 title 属性中不包含 “Figure” 的图像都不会匹配。
3. a[href][title] {color:red;}表示多属性选择器。（注意使用的时候必须两个同时有才起作用）

五、后代选择器（包含选择器）
1. h1 em {color:red;}。这个规则会把作为 h1 元素后代的 em 元素的文本变为红色。其他 em 文本（如段落或块引用中的 em）则不会被这个规则选中。注意，这种后代选择器的范围是h1的所有后代，只要在h1标签内的em都会有这个规则。
2. 子元素选择器：h1 > strong {color:red;}。相对于后代选择器来说，这种方式下只有h1的第一个直接后代是strong时起作用，strong不是直接后代就不起作用。（直接后代指的是，strong不包含在h1的其他标签下，当然，strong包含strong是允许的，只要第一个满足直接后代就行）
3. 相邻兄弟选择器：h1 + p {margin-top:50px;}。指的是使紧接在 h1 元素后出现的段落上边距为50像素，h1 和 p 元素需拥有共同的父元素。

六、伪类
1. 锚伪类：
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
2. first-child 伪类：p:first-child {font-weight: bold;}。指的是将作为某元素第一个子元素的所有 p 元素设置为粗体。区分：p > i:first-child {font-weight:bold;} 和 p:first-child i {font-weight:bold;} 。
3. lang 伪类

2017.03.25
一、CSS导航栏
1. 使用ul和li创建导航栏选项，在ul中定义list-style-type:none;表示将li的圆点去掉。
2. 垂直导航栏：添加a {display:block;width:60px;}，其中display:block表示的是将链接显示为块级元素并使整个区域可点击，设置宽度。
3. 水平导航栏：有两种创建水平导航栏的方法，使用行内或浮动列表项。
两种方法都不错，但是如果希望链接拥有相同的尺寸，就必须使用浮动方法。
(1)行内：li {display:inline;}
(2)浮动：li {float:left;}，a {display:block;width:60px;}

二、接下来继续学习CCS3、HTML5、JS

补充：CSS注释格式为/* this is a comment */；
内边距padding不允许负值。