CSS学习

CSS学习涵盖语法规则、样式创建方式、样式优先级、常用属性及元素定位等核心内容，以下是具体介绍：

语法

基本结构：由选择器和声明组成，声明包含属性和值，例如 p {color: red;} 中 p 是选择器，color: red; 是声明。
注释：使用 /* */ 进行注释，如 /* 这是一个注释 */。

选择器

常见类型：
id选择器和class选择器：id选择器用 # 标识，如 #idName；class选择器用 . 标识，如 .className。
组合选择：多个选择器可组合使用，用逗号分隔，如 h1, h2, p {color: green;} 表示 h1、h2 和 p 元素都应用该样式。
属性选择：根据元素的属性或属性值来选择元素，如 [title] 选择带有 title 属性的元素。

样式创建方式

外部样式表：
将CSS代码保存在单独的 .css 文件中，通过 <link> 标签引入HTML文件的 <head> 部分。
示例：

内部样式表：
在HTML文件的 <head> 部分使用 <style> 标签定义CSS样式。
示例：

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

内联样式：
直接在HTML元素的 style 属性中定义CSS样式。
示例：

<p style="color: sienna; margin-left: 20px">这是一个段落。</p>多重样式优先级

优先级顺序：内联样式 > 内部样式表 > 外部样式表 > 浏览器默认样式。

常用属性

背景：
background-color：设置元素的背景颜色。
background-image：设置元素的背景图像。
background-repeat：设置背景图像是否重复及重复方式。
background-attachment：设置背景图像是否固定或随页面滚动。
background-position：设置背景图像的初始位置。
文本：
包括颜色、字体、对齐方式、行高、字间距等属性，如 color、font-family、text-align、line-height、letter-spacing 等。
字体：
包括字体族、大小、粗细、样式等属性，如 font-family、font-size、font-weight、font-style 等。
链接：
a:link：正常，未访问过的链接样式。
a:visited：用户已访问过的链接样式。
a:hover：鼠标放在链接上时的样式。
a:active：链接被点击那一刻的样式。
列表：
包括列表项标记类型、位置等属性，如 list-style-type、list-style-position 等。
盒子模型：
Margin（外边距）：清除边框外的区域，外边距是透明的。
Border（边框）：围绕在内边距和内容外的边框，扩展内边距。
Padding（内边距）：清除内容周围的区域，内边距是透明的。
Content（内容）：盒子的内容，显示文本和图像。
边框属性：
包括边框宽度、样式、颜色等属性，如 border-width、border-style、border-color 等。
边框轮廓：
用于设置元素的轮廓，不影响元素尺寸，如 outline-width、outline-style、outline-color 等。
margin（外边距）：
可分别设置上、右、下、左四个方向的外边距，如 margin-top、margin-right、margin-bottom、margin-left，也可简写为 margin。
padding（填充）：
可分别设置上、右、下、左四个方向的内边距，如 padding-top、padding-right、padding-bottom、padding-left，也可简写为 padding。
尺寸：
包括宽度、高度、最大宽度、最大高度、最小宽度、最小高度等属性，如 width、height、max-width、max-height、min-width、min-height 等。

分组和嵌套选择器

分组选择器：多个选择器共享相同样式时，可用逗号分隔组合在一起。
示例：

h1, h2, p { color: green;}

嵌套选择器：在一个选择器内部嵌套另一个选择器，实现更精确的样式控制。
示例：

p { color: blue; text-align: center;}.marked { background-color: red;}.marked p { color: white;}p.marked { text-decoration: underline;}元素类型及转换

块级元素（block）：
特性：总是独占一行，宽度、高度、内边距和外边距都可控制。
常见元素：address、blockquote、center、div、h1 - h6、p、ul、ol、li 等。
内联元素（inline）：
特性：和相邻的内联元素在同一行，宽度、高度、内边距的 top/bottom 和外边距的 top/bottom 都不可改变。
常见元素：a、abbr、b、br、cite、code、em、img、input、span 等。
可变元素：根据上下文关系确定是块元素还是内联元素，如 applet、button、del、iframe 等。
元素转换：
display: block：将元素显示为块级元素。
display: inline：将元素显示为内联元素。
display: inline-block：将元素显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性。

定位

relative（相对定位）：
定位是相对于自身位置定位，设置偏移量时，会相对于自身所在的位置偏移。
设置了 relative 的元素仍然处在文档流中，元素的宽高不变，设置偏移量也不会影响其他元素的位置。
最外层容器设置为 relative 定位，在没有设置宽度的情况下，宽度是整个浏览器的宽度。
absolute（绝对定位）：
定位是相对于离元素最近的设置了绝对或相对定位的父元素决定的，如果没有父元素设置绝对或相对定位，则元素相对于根元素即 html 元素定位。
设置了 absolute 的元素脱离了文档流，元素在没有设置宽度的情况下，宽度由元素里面的内容决定。
脱离后原来的位置相当于是空的，下面的元素会来占据位置。

您可能感兴趣问答

Collapsible

热门标签

热点问答