CSS基础

最新推荐文章于 2024-08-14 12:22:11 发布

小羊gogogo

最新推荐文章于 2024-08-14 12:22:11 发布

阅读量64

点赞数

分类专栏：笔记文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_51376346/article/details/120901860

版权

笔记专栏收录该内容

15 篇文章 1 订阅

订阅专栏

1.CSS概念

CSS(Cascading Style Sheets)层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效。用来页面美化和布局控制。

2.CSS与HTML的结合方式

(1)内连样式:在标签内使用style属性指定css代码。(不使用)

<body>
<div style="color:greenyellow";>加油</div>
</body>

(2)内部样式:在head标签内定义style标签，style标签的标签体内容为css代码。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: coral;
        }
    </style>
</head>

(3)外部样式:定义css资源文件，在head标签内定义link标签，引入外部的资源文件。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--两种书写方式，一般使用第一种-->
    <link rel="stylesheet" href="css/a.css">
    <!--<style>
        @import "css/a.css";
    </style>-->
</head>

在项目中创建css文件夹，里面a.css文件写入以下内容：

div{
    color: crimson;
    font-size: 20px;
}

这三种方式css范围越来越大，二者之间耦合度越来越低。

3.CSS语法

格式：
     选择器｛
           属性名1:属性值1；
           属性名2:属性值2；
           ……
｝

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

分类：
(1)基本选择器
              1.id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一。
语法:#id属性值｛｝
              2.元素选择器：选择具有相同标签名称的元素
语法：标签名称｛｝
注意：id选择器优先级高于元素选择器
             3.类选择器:选择具有相同的class属性值的元素。
语法：.class属性值{}
注意：类选择器优先级高于元素选择器

            (2)扩展选择器
                1.选择所有元素
语法：*｛｝
                2．并集选择器：
语法：选择器1，选择器2{}
                3.子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1  选择器2{}
                4. 父选择器：筛选选择器2的父元素选择器1
语法：选择器1 ＞选择器2{}
                5. 属性选择器：选择元素名称，
属性名=属性值的元素
语法：元素名称[属性名=“属性值"]｛｝
                6. 伪类选择器：选择一些元素具有的状态
语法：元素：状态｛｝
             如：<a>
             状态：
                    link：初始化的状态
                    visited：被访问过的状态
                    active：正在访问状态
                    hover ：鼠标悬浮状态

Chain 10:57:17
CSS
1.CSS(Cascading Style Sheets)层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效。用来页面美化和布局控制。
2.CSS与HTML的结合方式
        (1)内连样式:在标签内使用style属性指定css代码。(不使用)
        (2)内部样式:在head标签内定义style标签，style标签的标签体内容为css代码。
        (3)外部样式:定义css资源文件，在head标签内定义link标签，引入外部的资源文件。
三种方式css范围越来越大。
3.CSS语法
格式：
     选择器｛
           属性名1:属性值1；
           属性名2:属性值2；
           ……
｝
4.选择器：筛选具有相似特征的元素
        分类：
            (1)基本选择器
               1.id选择器：选择具体的id属性值的元素，建议在一个html页面中id值唯一。
语法:#id属性值｛｝
              2.元素选择器：选择具有相同标签名称的元素
语法：标签名称｛｝
注意：id选择器优先级高于元素选择器
               3.类选择器:选择具有相同的class属性值的元素。
语法：.class属性值{}
注意：类选择器优先级高于元素选择器

            (2)扩展选择器
                1.选择所有元素
语法：*｛｝
                2．并集选择器：
语法：选择器1，选择器2{}
                3.子选择器：筛选选择器1元素下的选择器2元素
语法：选择器1  选择器2{}
                4. 父选择器：筛选选择器2的父元素选择器1
语法：选择器1 ＞选择器2{}
                5. 属性选择器：选择元素名称，
属性名=属性值的元素
语法：元素名称[属性名=“属性值"]｛｝
                6. 伪类选择器：选择一些元素具有的状态
语法：元素：状态｛｝
             如：<a>
             状态：
                    link：初始化的状态
                    visited：被访问过的状态
                    active：正在访问状态
                    hover ：鼠标悬浮状态

5.属性

1. 字体、文本
   font-size：字体大小
   color：文本颜色
   text-align ：对其方式
   line-height：行高
   2.背景
    background: url(“”)
   3．边框
    border：设置边框，符合属性
   4. 尺寸
   width：宽度
   height：高度
   5. 盒子模型：控制布局
    margin ：外边距
    padding：内边距
             默认情况下内边距会影响整个盒子的大小。可以用box-sizing : border-box;
设置盒子的属性，让width和height就是最终盒子的大小。

外边距与内边距是两个相对概念。

例：两个正方形嵌套

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <style>
        div{
            border: 1px solid green;
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 75px ;
            box-sizing: border-box;/*设置盒子属性 时盒子width和height为最终盒子大小*/
        }
        .div1{
            width: 50px;
            height: 50px;
            /*margin: 75px; 外边距*/
        }
    </style>
</head>
<body>
<div class="div2">
    <div class="div1"></div>
</div>
</body>
</html>

结果：

     float：浮动
        1.left
        2.right

小羊gogogo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础

目录1.CSS概念2.CSS与HTML的结合方式3.CSS语法4.选择器：筛选具有相似特征的元素5.属性1.CSS概念 CSS(CascadingStyleSheets)层叠样式表层叠：多个样式可以作用在同一个html的元素上，同时生效。用来页面美化和布局控制。2.CSS与HTML的结合方式 (1)内连样式:在标签内使用style属性指定css代码。(不使用)<body><div style="color...
复制链接

扫一扫

专栏目录