草履虫都看得懂的CSS入门基础^^

最新推荐文章于 2024-08-22 20:21:34 发布

炒鸡蛋44

最新推荐文章于 2024-08-22 20:21:34 发布

阅读量169

点赞数

分类专栏：网页开发文章标签： css html

本文链接：https://blog.csdn.net/weixin_55643605/article/details/120709394

版权

网页开发专栏收录该内容

9 篇文章 1 订阅

订阅专栏

本文详细介绍了CSS的基本用法，包括内联样式、内嵌样式和外链样式表，重点讲解了样式选择器（如标签选择器、ID选择器、Class选择器等）、选择器优先级以及常见属性如颜色、字体和布局。通过实例演示，展示了如何在HTML中应用这些概念来美化网页。

摘要由CSDN通过智能技术生成

CSS

介绍：

使用方式：

1、内联样式：

常见CSS属性：

字体颜色：color:

背景颜色：background-color:

字体大小：font-size:

文字水平对齐：text-align:

CSS属性大全_代码改变生活-CSDN博客_css属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 style="background-color: red; color: seagreen; text-align: center">CSS基本概念</h1>
</body>
</html>

效果如下：

2.内嵌样式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
            background-color: red;
            color: seagreen;
            font-size: 40px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>CSS基本概念</h1>
    <h1>内嵌样式</h1>
</body>
</html>

3.外链样式表：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 外链样式 -->
    <link rel="stylesheet" href="demo1.css">
</head>
<body>
    <h1>CSS基本概念</h1>
    <h1>内嵌样式</h1>
</body>
</html>

一.样式选择器：

1.标签选择器：

2. id选择器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通过id查找元素 */
        #idsearch{
            font-size: 40px;
            color: red;
        }
    </style>
</head>
<body>
    <h1 id="idsearch">CSS基本概念</h1>
    <h1>id选择器</h1>
</body>
</html>

效果如下：

3.Class选择器：

class可以和其他标签一起使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通过class查找元素 */
        .red{
            background-color: silver;
            color: brown;
        }
        p.red{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <h1 class="red">CSS基本概念</h1>
    <h1 class="red">Class选择器</h1>
    <p class="red">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, impedit eum necessitatibus, nihil placeat quaerat magnam cupiditate debitis cum obcaecati ipsum consequuntur architecto? Aliquam consequatur exercitationem alias nulla? Voluptas, aperiam.</p>
</body>
</html>

效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 通过class查找元素 */
        .red{
            background-color: silver;
            color: brown;
        }
        .center{
            text-align: center;
        }
        p.red{
            font-size: 15px;
        }
    </style>
</head>
<body>
    <h1 class="red center">CSS基本概念</h1>
    <h1 class="red">Class选择器</h1>
    <p class="red">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, impedit eum necessitatibus, nihil placeat quaerat magnam cupiditate debitis cum obcaecati ipsum consequuntur architecto? Aliquam consequatur exercitationem alias nulla? Voluptas, aperiam.</p>
</body>
</html>

注意：

标签与类选择器结合时，标签在前，类选择器在后例如：p.red{}

4.群组选择器：

5.后代选择器：

   <title>后代选择器</title>
    <style>
        div p{
            /* 查找div后代元素P（包含直接子元素） */
            color: cadetblue;
        }
    </style>
</head>
<body>
    <div>祖先标签
        <p>父标签
            <span>子标签</span>
        </p>
    </div>
</body>

效果如下：

通过div找span: div span{}

ps 一些快捷键

<!-- div#title + tab -->
<div id="title"></div>
<!-- p.red + tab -->
<p class="red"></p>
<!-- div#d1.red + tab -->
<div id="d1" class="red"></div>

6.伪类选择器：

 <title>伪类选择器</title>
    <style>
        h1{
            color:darkcyan;
            background-color: hotpink;
            /* transition过渡 让样式的变化在规定时间内完成 */
            transiton: all 0.5s;
        }
        /* s鼠标只有移动到文字上时 文字才变色 */
        h1:hover{
            /* 将鼠标移出时 显示的样式 */
            color:green;
            background-color: blue;
        }
    </style>
</head>
<body>
    <h1>伪类选择器</h1>
</body>

二.选择器优先级：

当选择器的权重一致时后写的样式生效

三.样式表特征 :

ps：大部分的文本属性都可以继承给子元素继承的属性优先级是最低的

四.属性单位：

1.颜色

rgb red green bule

rgba (red(0~255)， green， blue，不透明度（0~1）)

2.字体

3.文本样式

4.背景属性

opacity 0(纯透明)~1（不透明）

ps：需要设置宽高

一个小方块宽高25

炒鸡蛋44

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
草履虫都看得懂的CSS入门基础^^

CSS介绍：使用方式：一、内联样式：常见CSS属性：字体颜色：color:背景颜色：background-color:字体大小：font-size:文字水平对齐：text-align:CSS属性大全_代码改变生活-CSDN博客_css属性<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta htt...
复制链接

扫一扫

专栏目录