CSS入门

文章目录

CSS入门

层叠样式表（样式可以叠加），CSS用来美化网页，能够做到网页和内容分离，但还是需要依赖HTML

CSS的基本使用

CSS基本语法

由选择器 和声明块 组成，声明块包含一个或多个属性: 值;的声明（注意别丢下分号）

css 复制代码

选择器 {
  属性1: 值1;
  属性2: 值2;
  font-family: "arial black";
}
/*如果属性值由多个单词组成，要给值加上引号*/

注释

CSS注释以/*开头，*/结尾，可单行或多行注释（ctrl+shift+/）

css 复制代码

/* 这是单行注释 */
/*
这是
多行
注释
*/

CSS的使用

行内样式 ：直接在HTML标签的style属性中写CSS，优先级高但维护性差
<div style="color: red;">内联样式</div>
*内部样式表 ：在HTML的<head>标签内用<style>标签写CSS，作用于当前页面。
html 复制代码
```
<head>
  <style>
    div { color: blue; }
  </style>
</head>
```

外部样式 ：将CSS写在单独的.css文件中，通过<link>标签引入，可复用且维护性好。

html 复制代码

<head>
  <link rel="stylesheet" href="style.css">
</head>
rel：当前文件与引入的文件之间的关系
type：类型，css类型
href：引入的资源的路径

注意：CSS优先级：就近原则

CSS选择器

选择器用于定位要设置样式的HTML元素

基本选择器

元素选择器 ：通过HTML标签名选择元素。
示例：p { color: green; }
类选择器 ：通过元素的class属性选择，以.开头。
示例：
css 复制代码
```
 .box { width: 100px; }
```
html 复制代码
```
<div class="box">类选择器</div>
```
ID选择器 ：通过元素的id属性选择，以#开头，页面中id唯一。
示例：
css 复制代码
```
#header { height: 50px; }
```
html 复制代码
```
<div id="header">ID选择器</div>
```
通配符（全）选择器 ：用*选择所有元素，常用于重置默认样式。
示例：* { margin: 0; padding: 0; }

组合选择器

后代选择器 ：用空格分隔 ，选择祖先元素内的后代元素。
示例：nav a { color: purple; }（nav标签内的所有<a>标签变紫）
子选择器 ：用>分隔，选择直接子元素。
示例：ul > li { list-style: none; }（ul的直接子元素<li>去除列表样式）
相邻兄弟选择器 ：用+分隔，选择紧邻的下一个兄弟元素。
示例：h2 + p { margin-top: 0; }（h2紧邻的下一个<p>标签上边距为0）
通用兄弟选择器 ：用~分隔，选择后面所有同级兄弟元素。
示例：h3 ~ p { color: gray; }（h3后面所有同级<p>标签变灰）

CSS常用属性设置

背景

background-color：设置背景颜色，值可为颜色名、十六进制、RGB
background-image：设置背景图片，值为url("图片路径")
background-repeat：控制背景图片重复方式，如no-repeat（不重复）、repeat-x（水平重复）、repeat-y（垂直重复）
background-position：设置背景图片位置，值可为方位词（如center）或坐标（如50px 100px）

文本

color：设置文字颜色。
text-align：设置文本水平对齐方式，如left（左对齐）、center（居中）、right（右对齐）。
text-decoration：设置文本装饰，如none（去除下划线，常用于超链接）、underline（下划线）、line-through（中划线）。
text-indent：设置文本首行缩进，值常为2em（两个字符宽度）。
line-height：设置行高，可控制文字垂直居中，值可为数值、百分比或长度单位

html 复制代码

#div4 {
	/* 同时设置元素的上、中、下划线 */
	text-decoration: overline underline line-through;  
}

字体

font-family：设置字体族，可指定多个字体（浏览器按顺序查找），如"Microsoft Yahei", sans-serif，楷体。
font-size：设置字体大小，常用单位px、em。
font-weight：设置字体粗细，值可为normal（正常）、bold（加粗）或数值（如700等效bold）。
font-style：设置字体样式，如italic（斜体）、normal（正常）

对齐方式

主要通过text-align（文本水平对齐）、line-height（文字垂直居中，需与容器高度配合）等属性实现

left 默认
right
center
justify

display属性

块级元素

可以设置元素的宽高和边距，元素会自动换行

行内元素

不可以设置元素的宽高和边距，元素不会自动换行

行内块级元素

可以设置元素的宽高和边距，元素不会自动换行

用于控制元素的显示类型，常用值：

block：块级元素，独占一行，可设置宽高。
inline：行内元素，与其他元素同行，不可设置宽高。
inline-block：行内块状元素，与其他元素同行，可设置宽高。
none：隐藏元素，不占据页面空间。

浮动

通过float属性（值为left、right、none）让元素脱离文档流，实现多元素横向排列

只有横向浮动，并没有纵向浮动。

会将元素的display属性变更为block。

浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片）

浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

注意：浮动后父元素可能塌陷，需通过"清除浮动"解决（如给父元素加overflow: hidden或使用伪元素清除）

盒子模型

所有HTML元素可视为"盒子"，由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

border边框

用于设置元素边框，可设置border-width（宽度）、border-style（样式，如solid实线、dashed虚线）、border-color（颜色），也可简写：

css 复制代码

border: 1px solid red; /* 宽度1px、实线、红色 */

还可分别设置上、右、下、左边框：border-top、border-right、border-bottom、border-left。

border-collapse设置是否将表格边框折叠为单一边框。

属性值：separate（默认，单元格边框独立）、collapse（单元格边框合并）

padding内边距

元素内容与边框之间的距离，可设置padding-top、padding-right、padding-bottom、padding-left，也可简写：

css 复制代码

padding: 10px; /* 四个方向均为10px */
padding: 10px 20px; /* 上下10px，左右20px */
padding: 10px 20px 30px; /* 上10px，左右20px，下30px */
padding: 10px 20px 30px 40px; /* 上、右、下、左分别为10、20、30、40px */

margin外边距

元素与其他元素之间的距离，设置方式同padding，可用于实现元素居中（如margin: 0 auto;让块级元素水平居中）。

单独设置各边的外边距：margin-top、margin-left、margin-bottom、margin-right