CSS样式指南：选择器、文本与边框属性解析

需积分: 9 131 浏览量更新于2024-07-09 收藏 494KB PDF 举报

"这是一份关于CSS的学习笔记，涵盖了CSS的基本语法、样式表的三种类型、各种选择器的用法以及一些重要的CSS规则样式，包括文本属性、列表属性、边框属性、浮动属性、背景属性、盒模型、溢出属性和元素分类等。" 在CSS中，基本语法是通过选择器来选定元素，并应用样式。例如： ```css 选择器 { 属性: 属性值; } ``` CSS样式表分为三种类型：行内样式（将样式直接写在HTML元素的style属性内）、内部样式表（在<head>部分的<style>标签内）和外部样式表（以.css文件形式独立存储，通过link标签引入）。选择器是CSS的核心，它们用于选取要应用样式的HTML元素。常见的选择器包括： 1. 通配符选择器 `*`：选择所有元素。 2. 标签选择器：如`p`，选择所有段落元素。 3. 类选择器：`.class-name`，选择具有指定类名的元素。 4. ID选择器：`#id-name`，选择ID为id-name的唯一元素。 5. 动态伪类选择器，如`:hover`，用于选择鼠标悬停时的状态。 6. 层级选择器，如`>`，选择直接子元素。 7. 结构伪类选择器，如`:first-child`，选择父元素的第一个子元素。 8. 否定伪类 `:not()`，用于排除满足条件的元素。 9. 目标伪类选择器 `:target`，选择URL锚点对应的元素。 10. UI元素状态伪类选择器，如`:active`，表示元素被激活的状态。 11. 属性选择器，如`[attr=value]`，选择具有特定属性值的元素。文本属性用于修饰文字，包括`font-size`、`font-family`、`color`、`font-weight`、`font-style`、`text-align`、`line-height`、`text-decoration`、`text-indent`和`letter-spacing/word-spacing`。其中，`font`是一个复合属性，可以一次性设置多个字体属性。列表属性主要涉及`list-style-type`、`list-style-image`和`list-style-position`，用于改变列表项的样式。边框属性包括复合属性`border`和单一属性，如`border-width`、`border-style`和`border-color`，以及实现圆角边框的`border-radius`。浮动属性（`float`）用于创建浮动元素，常用于布局。背景属性则涵盖`background-color`、`background-image`、`background-repeat`、`background-position`、`background-attachment`和`background-size`。`background`是一个复合属性，可以简写所有背景属性。盒模型是理解CSS布局的关键，包括元素的`width`、`height`、`margin`、`padding`和`border`。溢出属性处理元素内容超出其容器的情况，如`overflow`控制是否显示滚动条，`text-overflow`决定如何处理文本溢出，如`ellipsis`表示用省略号表示超出的内容。元素分类主要分为两种：block元素（如`div`、`p`、`ul`、`li`），它们占据整行；inline元素（如`span`、`a`），它们只占据自身内容的宽度。这些知识点构成了CSS的基础，理解和掌握它们对于网页设计和前端开发至关重要。


}  
二、css样式表:  
1、行内样式:  
    含义：将所有得CSS语法放置在标签里面
          基本语法：
          弊端：结构(HTML)和样式(CSS)没有分开,使用行内样式表，只会对独立得一个标签进行修饰,
      代码重复率比较高
2、内部样式表:  
          含义：将对应得CSS语法与结构分开；所有得CSS语法需要放在一个style标签里面，
      而且style标签需要放在头部标签里面
          基本语法：
            
            
          弊端：结构和样式还没有做到完全分离，你的CSS还在html文件；              
3、外部样式表:  
    含义：所有的样式修饰都放在一个独立的以.css为后缀名得文件中
                  需要使用link标签进行引入
        
             优点：结构样式完全分离，代码简介

三、CSS选择器:  
1、通配符选择器: * { }  
  --- *{margin:0; padding:0;}
2、标签选择器: 标签 { }  
    --- p {color:red}
3、类选择器: .类名 { }  
   --- .box {width:100px;  height: 100px;}
4、id选择器: #id { }  
  --- #box {width:100px;  height: 100px;}