Day三 CSS基础

最新推荐文章于 2024-07-26 08:00:00 发布

八九。

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量199

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_51924238/article/details/123430417

版权

Day三 css基础

一、体验CSS

CSS初始（层叠样式表）
CSS引入方式

1.1css语法规则：

css写在style标签中，style标签一般写在head标签里面，title下面；
颜色：color；字体大小：font-size；背景：background；宽高度：width height

!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>
        /* CSS 注释 */
        /* 这里都写的都是CSS */
        /* 选择器{css属性} */
        /* 选择器：查找标签  */
        p {
            /* 文字颜色 */
            color: red;
            /* 字变大 px :像素*/
            font-size: 30px;
            /* 背景颜色 */
            background-color: blue;
            /* width  height */
            width: 400px;
            height: 200px;
        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

2.1CSS引入方式：

内嵌式：css写在style标签中（小案例）；提示：style标签虽然可以写在页面的任何位置，通常写在head标签中
外联式：css写在单独的css文件中（项目中）提示：需要通过link标签在网页中引入（head标签）
行内式：css写在标签的style标签中；提示：之后配合js使用

<!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="./my.css">
</head>
<body>
    <!-- css到底能写在哪里 -->
    <p>这是一个p标签</p>
    <div style="color: green; font-size: 100px;">这是div标签</div>
    <div>这是一个div标签</div>
</body>
</html>

二、CSS基础之基础选择器

标签选择器
类选择器
id选择器
通配符选择器

1.1标签选择器：

结构：标签名{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=  , initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 选择器{} */
        /* 所谓标签选择器：以标签命名的选择器 */
        p{
            color: red;
        }
        /* 标签选择器：选中所有的这个标签都生效css */
    </style>
</head>
<body>
    <p>ppppppppp</p>
    <p>这个p是shenmeyanse</p>
    <p>212354545</p>
</body>
</html>

2.1 类选择器：

结构：.类名{css属性名：属性值}
作用：通过类名找到页面中所有带有这个类名的标签，设置样式
注意：所有标签上都有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

最低0.47元/天解锁文章

八九。

关注

0
点赞
踩
0

收藏

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

Day三 css基础一、体验CSS CSS初始（层叠样式表） CSS引入方式 1.1css语法规则： css写在style标签中，style标签一般写在head标签里面，title下面；颜色：color；字体大小：font-size；背景：background；宽高度：width height !DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"..
复制链接

扫一扫