了解CSS

最新推荐文章于 2024-06-04 08:46:53 发布

^_^白心火龙果

最新推荐文章于 2024-06-04 08:46:53 发布

阅读量200

点赞数 4

分类专栏： javaWeb 文章标签： css html

本文链接：https://blog.csdn.net/m0_51064043/article/details/123482066

版权

javaWeb 专栏收录该内容

16 篇文章 3 订阅

订阅专栏

文章目录

前言
一、概念
二、css使用（css与html结合方式）
三、css的基本语法
四、选择器
五、属性

前言

css作用：页面美化和布局控制

一、概念

cascading Style Sheet:层叠样式表
层叠：多个样式可以作用在同一个html的元素上，同时生效

好处

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

二、css使用（css与html结合方式）

内联样式

在标签内使用style属性指定css代码（不推荐）

<div style="color: red;">hello css</div>

內部样式

在head标签内，定义style标签，style标签的标签体内就是css代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
<div>hello css</div>
</body>
</html>

外部样式

定义css资源文件
在head标签内，定义link标签，引入外部的资源文件

css文件：
div{
    color: aqua;
}

<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

还有一种写法，不常用

<style>
        @import "css/a.css";
    </style>

注意

1,2,3种方式，css作用范围越来越大
1方式不常用，后期常用2，3

三、css的基本语法

格式：选择器{属性名1：属性值1；属性名2：属性值2；属性名3：属性值3；}
注意

每一对属性需要使用;隔开，最后一对属性可以不加

四、选择器

筛选具有相似特征的元素

分类:
基础选择器

id选择器
- 选择器具体的id属性值的元素
- 语法：#id属性值{}
- 建议在一个html页面中id值唯一
元素选择器
- 选择具有相同标签名称的元素
- 语法：标签名称{}
- 注意：id选择器优先级高于元素选择器
类选择器
- 选择具有相同的class属性值的元素
- 语法：.class属性值{}
- 注意：class选择器优先级高于元素选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: green;
        }
        .cls1{
            color: blue;
        }
    </style>
</head>
<body>
<!--基础选择器-->
<!--id选择器：选择器具体的id属性值的元素 语法：#id属性值{} 建议在一个html页面中id值唯一-->
<!--元素选择器：选择具有相同标签名称的元素 语法：标签名称{} 注意：id选择器优先级高于元素选择器-->
<!--类选择器：选择具有相同的class属性值的元素 语法：.class属性值{} 注意：class选择器优先级高于元素选择器-->
<div id="div1">串子博客</div>
<div class="cls1">程序员</div>
<p class="cls1">串子大学</p>
</body>
</html>

扩展选择器

选择所有元素
语法：*{}

并集选择器
- 语法：选择器1，选择器2{}
子选择器
- 语法：选择器1 选择器2{}
- 筛选选择器1元素下的选择器2元素

<style>
        div p{
            color: red;
        }
    </style>
<div>
    <p>博客</p>
</div>
<p>程序员</p>

父选择器
- 语法：选择器1>选择器2{}
- 筛选选择器2的父元素选择器1

div > p{
            border: 1px solid;
        }

属性选择器
- 语法：元素名称[属性名=“属性值”]{}
- 选择元素名称，属性名=属性值的元素

input[type='text']{}
<input type="text">

伪类选择器
- 语法：元素：状态{}
- 选择一些元素具有的状态
- 如：
  - 状态
    - link：初始化的状态
    - visited：被访问过的状态
    - active：正在访问状态
    - hover：鼠标悬浮状态

input[type='text']{}
<input type="text">

五、属性

字体、文本

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

背景

background

边框

border：设置边框，复合属性

尺寸

width：宽度
height：高度

盒子模型

控制布局
padding：内边距
- 默认情况下，内边距会影响整个盒子的大小
- box-sizing: border-box;直接写padding会导致外面的框变大，如何解决？设置盒子的属性，让width和height就是最终盒子的大小
margin：外边距

div{
            border: 1px solid red;
        }
        .div1{
            width: 100px;
            height: 100px;
            margin: 50px;
        }
        .div2{
            width: 200px;
            height: 200px;
        }
    </style>
<div class="div2">
    <div class="div1"></div>
</div>

float：浮动
- left：左浮动
- right：右浮动

div{
           border: 1px solid red;
            width: 100px;
        }
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
默认换行，如果想在一行显示

.div3{
            float: left;
        }
        .div4{
            float: left;
        }
        .div5{
            float: right;
        }
<div class="div3">aaa</div>
<div class="div4">bbb</div>
<div class="div5">ccc</div>

^_^白心火龙果

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
了解CSS

文章目录前言一、概念二、css使用（css与html结合方式）三、css的基本语法四、选择器五、属性前言css作用：页面美化和布局控制一、概念cascading Style Sheet:层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效好处功能比较强大将内容的展示和样式控制分离降低耦合度。解耦分工协作更容易提高开发效率二、css使用（css与html结合方式）内联样式在标签内使用style属性指定css代码（不推荐）<div style="
复制链接

扫一扫

专栏目录