CSS样式表基础与应用-CSDN博客

本文链接：https://blog.csdn.net/asqwer_/article/details/129370081

CSS是层叠样式表，也是一种标记语言，主要用于设置HTML页面中的文字内容（字体、大小、对齐方式)、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。

标签选择器：

class选择器：

口诀：样式点定义，结构类（class)调用，一个或多个，开发最常用

类选择器用’.'来进行标识，后面紧跟类名（自定义类名）。

不要用纯数字或中文来命名，尽量使用英文来表示。

id选择器：

样式#定义，结构id调用，只能调用一次

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。

#para1{ 
text-align: center;
color: red;
}

注意：id属性不要以数字开头

通配符选择器：

使用*定义，不需要调用,自动给所有元素使用样式

CSS列表样式：

<style>
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>
<p>有序列表实例:</p>
<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>
<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

字体属性：

体系

CSS使用font-family属性定义文本的字体体系

1、各种字体之间必须使用英文状态下的逗号隔开

2、有空格隔开的多个单词组成的字体，加引号

3、尽量使用系统默认自带字体

大小

CSS使用font-size属性定义字体大小，单位是px

1、谷歌浏览器默认的字体大小为16px

2、标题比较特殊，需要单独指定文字大小

粗细

CSS使用font-weight属性定义字体粗细

font-weight: normal/ bold/ lighter/ number

normal 为默认值等同于400，bold 为加粗等同于700（数字后面不要跟单位）

复合属性写法：

font: font-style font-weight font-size/line-height font-family

必须按照上面的顺序写（font-size/font-family不可以省略）

文本属性：

文本颜色：

预定义的颜色值：red,green,blue,pink

十六进制：#FF6600,#FF0000,#29D794

RGB代码：rgb(255,0,0)或rgb(100%,0%,0%)

文本对齐：

text-align 属性设置文本对齐方式(center, right, justify)

.align{
text-align:center:
text-align:right;
text-align:justify
}

文本装饰：

text-decoration属性规定添加到文本的修饰。

none 没有装饰线 underline 下划线

overline 上划线 line-through 删除线

文本缩进：

text-indent 定义首行缩进

行高：

背景：

背景颜色

background-color 属性定义了元素的背景颜色

.ha{
background-color:#b0c4de;
}

背景图像

background-image 属性描述了元素的背景图像
默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体

.ha{
background-image:url('paper.gif');
}

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。
background-repeat定义图像平铺方式。
repeat: 默认方式，完全平铺；no-repaet:不平铺
repeat-x:横向平铺；repeat-y:纵向平铺

背景- 简写属性

当使用简写属性时，属性值的顺序为：:
background-color
background-image
background-repeat
background-attachment
background-position

.ha{
background:#ffffff url('img_tree.png') no-repeat right top;
}

盒子模型：

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

outline（轮廓）：

outline声明轮廓属性

outline-color设置轮廓颜色

outline-style设置轮廓样式

outline-width设置轮廓宽度

marign(外边框)：

margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
margin:25px;
- 所有的4个边距都是25px

注：填充同外边框同理

分组和嵌套选择器：

分组选择器：

<style>
h1,h2,p
{
	color:green;
}
</style>
</head>

<body>
<h1>这是标题</h1>
<h2>这也是一个标题</h2>

Display（显示）与Visibility（可见性）：

隐藏元素：

visibility:hidden;隐藏元素仍需要占用与未隐藏时占用一样的空间

display:none;隐藏的元素不占用任何空间

请添加图片描述

CSS布局

在这里插入图片描述

伪类

p:first-child:匹配第一个p元素
p>i:first-child:所有p元素中的第一个i元素
p:first-child i:匹配所有作为第一个子元素中的所有的i元素
伪元素：

p:first-line{}:对p元素的第一行文本进行格式化
before:可以在元素的内容前面插入内容
before:可以在元素的内容前面插入内容
after:可以在元素的内容后面插入新内容
first-letter:向文本首字母设置样式
focus选择器:一个输入字段获得焦点时选择的样式

网页布局：

网页布局有很多种方式，一般分为以下几个部分：头部区域、菜单导航区域、内容区域、底部区域。

头部样式

.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}

导航链接

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}