css,基础知识小总结

前端，初学者基础知识小总结，内容简单易懂，适合想学习前端的新手小百查考学习,内容有标签选择器，类选择器，id选择器，通配符，后代选择器，子选择器，并集选择器，伪类选择器，字体“样式系列大小粗细风格”，文本样式，文本颜色，文本对齐，装饰文本，文本缩进，行间距，背景颜色，背景图片，背景平铺，背景图片位置，背景样式简写，背景色半透明，元素的显示模式：“块元素,行内块元素,元素显示模式的转换" ,边框、外边距、内边距、实际内容,浮动，网页布局总结，清除浮动，CSS样式表：“行内样式表，内部样式表，外部样式表,这些基础前端内容。还未学习前端，想了解前端的宝子们可以看看。 ### CSS基础知识小结####一、CSS选择器**1.1标签选择器** - **定义**:使用HTML标签名称作为选择器。 - **语法**: `标签名{属性:属性值;}`。 - **示例**: ```css div { color: red; } ``` **1.2类选择器** - **定义**:通过`.类名`来选择具有特定类的元素。 - **语法**: `.类名{属性:属性值;}`。 - **示例**: ```css .red { color: red; } 变红色 ``` **1.3 ID选择器** - **定义**:通过`#ID名`来选择具有特定ID的元素。 - **语法**: `#ID名{属性:属性值;}`。 - **示例**: ```css #red { color: red; } 变红色 ``` **1.4通配符选择器** - **定义**:选择文档中的所有元素。 - **语法**: `* {属性:属性值;}`。 - **示例**: ```css * { margin: 0; padding: 0; } ``` **1.5后代选择器** - **定义**:选择某个元素的所有后代元素。 - **语法**: `元素1元素2 {属性:属性值;}`。 - **示例**: ```css ul li { list-style-type: none; } ``` **1.6子选择器** - **定义**:选择某个元素的所有直接子元素。 - **语法**: `元素1 >元素2 {属性:属性值;}`。 - **示例**: ```css div > p { color: blue; } ``` **1.7并集选择器** - **定义**:选择多种类型的元素。 - **语法**: `元素1,元素2 {属性:属性值;}`。 - **示例**: ```css ul, div { border: 1px solid black; } ``` **1.8伪类选择器** - **定义**:选择元素的某种状态。 - **示例**: ```css a:link { color: blue; } a:visited { color: purple; } a:hover { color: red; } a:active { color: green; } ``` ####二、字体样式**2.1字体系列** - **属性**: `font-family`。 - **示例**: ```css p { font-family: "微软雅黑"; } ``` **2.2字体大小** - **属性**: `font-size`。 - **示例**: ```css p { font-size: 20px; } ``` **2.3字体粗细** - **属性**: `font-weight`。 - **示例**: ```css p { font-weight: bold; } ``` **2.4字体风格** - **属性**: `font-style`。 - **示例**: ```css p { font-style: italic; } ``` ####三、文本样式**3.1文本颜色** - **属性**: `color`。 - **示例**: ```css p { color: red; } ``` **3.2文本对齐** - **属性**: `text-align`。 - **示例**: ```css p { text-align: center; } ``` **3.3装饰文本** - **属性**: `text-decoration`。 - **示例**: ```css a { text-decoration: underline; } ``` **3.4文本缩进** - **属性**: `text-indent`。 - **示例**: ```css p { text-indent: 2em; } ``` **3.5行间距** - **属性**: `line-height`。 - **示例**: ```css p { line-height: 1.5; } ``` ####四、背景样式**4.1背景颜色** - **属性**: `background-color`。 - **示例**: ```css div { background-color: yellow; } ``` **4.2背景图片** - **属性**: `background-image`。 - **示例**: ```css div { background-image: url("image.jpg"); } ``` **4.3背景平铺** - **属性**: `background-repeat`。 - **示例**: ```css div { background-repeat: no-repeat; } ``` **4.4背景图片位置** - **属性**: `background-position`。 - **示例**: ```css div { background-position: top left; } ``` **4.5背景样式简写** - **属性**: `background`。 - **示例**: ```css div { background: url("image.jpg") no-repeat top left; } ``` **4.6背景色半透明** - **属性**: `background-color`。 - **示例**: ```css div { background-color: rgba(255, 0.5); } ``` ####五、元素的显示模式**5.1块元素** - **示例**: ```html ``` - **特点**: -占据整行。 -可以设置高度和宽度。 **5.2行内元素** - **示例**: ```html ``` - **特点**: -不占据整行。 -不能直接设置高度和宽度。 ####六、边框、外边距、内边距- **属性**: `border`, `margin`, `padding`。 - **示例**: ```css div { border: 1px solid black; margin: 10px; padding: 20px; } ``` ####七、浮动与布局**7.1浮动** - **属性**: `float`。 - **示例**: ```css div { float: left; } ``` **7.2清除浮动** - **方法**: -使用`clear`属性。 -使用伪元素`::after`和`content`属性。 - **示例**: ```css .clearfix::after { content: ""; display: table; clear: both; } ``` ####八、CSS样式表**8.1行内样式表** - **示例**: ```html 红色文本 ``` **8.2内部样式表** - **示例**: ```html div { color: red; } ``` **8.3外部样式表** - **创建**:创建一个单独的`.css`文件。 - **引用**: ```html ```以上是CSS的一些基础知识总结,对于初学者来说,这些内容是入门的基础,也是构建复杂网页设计的重要基石。希望可以帮助初学者快速掌握CSS的基本用法。