CSS 基础

最新推荐文章于 2024-11-19 20:40:54 发布

原创最新推荐文章于 2024-11-19 20:40:54 发布 · 191 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了CSS的基础知识，包括其在HTML页面中的应用、功能优势、选择器种类、属性控制（如字体、颜色、布局等）以及盒子模型和浮动。深入探讨了CSS的三种常见使用方式，并展示了关键的扩展选择器和属性实例。

CSS：页面美化和布局控制

概念： CSS(Cascading Style Sheets)，通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

好处：

功能强大
将内容展示和样式控制分离
- 降低耦合度，解耦
- 让分工协作更容易
- 提高开发效率

1. CSS的使用（CSS和HTML的结合方式）

内联样式：在标签内使用style属性指定css代码
内部样式：在head标签内，定义style标签，style标签的标签体内容就是css内容
外部样式：定义css资源文件；在head标签内，定义style标签，一般使用link标签引入外部资源文件
- < link> 标签定义文档与外部资源的关系。
- 也可以使用@import "外部资源文件位置"来引入外部资源文件

1、2、3三种方式，css作用的范围越来越大

2. 语法格式

格式：

选择器 {
	属性名1:属性值1;
	属性名2:属性值2;
	...
}

注意： 每一对属性需要用分号;隔开，最后一对属性可以不用;

选择器： 筛选具有相似特征的元素

3. 选择器

分类：

基本选择器
- id选择器： 选择具体的id属性值的元素
  语法：#id属性值{}
- 元素选择器： 选择具有相同标签名称的元素
  语法：标签名称{}
- 类选择器： 选择具有相同class属性值的元素
  语法：.class属性值{}
- 优先级： id选择器 > 类选择器 > 元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        <!-- id选择器 -->
        #div1{
            color: red;

        }
        <!-- 标签选择器 -->
        a{
            color: blue;
        }
        <!-- 类选择器 -->
        .cls1{
            color: yellow;
        }
    </style>
</head>
<body>
<div id="div1">Hello</div>
<a>Hello</a>
<p class="cls1">Hello</p>
</body>
</html>

扩展选择器
- 选择所有元素：
  语法：*{}
- 并集选择器：
  语法：* 选择器1，选择器2{}
- 子选择器：筛选选择器1元素下的选择器2元素
  语法：选择器1 选择器2{}
- 父选择器：筛选选择器2的父元素选择器1
  语法：选择器1 > 选择器2{}
- 属性选择器：选择元素名称，属性名=属性值的元素
  语法：元素名称[属性名=“属性值”]{}
- 伪类选择器：选择一些元素具有的状态
  语法：元素:状态{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <style>
        <!-- 子选择器 -->
        div p{
            color: blue;
        }
        <!-- 父选择器 -->
        div > p{
            border: 1px solid;
        }
        <!-- 属性选择器 -->
        input[type="text"]{
            border: 3px solid;
        }
    </style>
</head>
<body>
<div><p>Hello</p></div> <br>
<div>Hello</div> <br>
<p>Hello</p> <br>
<input type="text">
<input type="password">
</body>
</html>

4. 属性

字体（Font）属性

font-size：字体大小
color：颜色
text-align：对齐方式
line-height：行高

背景

background：复合属性，设置对象的背景特性

边框

border：设置边框的特性，复合属性

尺寸

width：宽度
height：高度

盒子模型：控制布局

margin：外边距
padding：内边距，默认情况下内边距会影响整个盒子的大小
- box-sizing: border-box：设置盒子的属性，使盒子的大小不会改变
float：浮动
- left：左浮动
- right：右浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            border: 2px solid darkblue;
        }
        .div1{
            width: 200px;
            height: 200px;
            /*
            margin: 100px;
            */
        }
        .div2{
            width: 400px;
            height: 400px;
            /*
            设置盒子的属性，使盒子的大小不会改变
             */
            box-sizing: border-box;
            padding: 100px;
        }
        .div3{
            width: 200px;
            height: 200px;
            float: left;
        }
    </style>
</head>
<body>
<div class="div2">
    <div class="div1">

    </div>
</div>
<div class="div3">aaa</div>
<div class="div3">bbb</div>
<div class="div3">ccc</div>
</body>
</html>