前端自学第五天—— CSS基础

洋洋拯救世界

已于 2022-03-22 20:08:24 修改

阅读量142

点赞数 1

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

于 2022-03-22 15:09:58 首次发布

本文链接：https://blog.csdn.net/weixin_45762791/article/details/123659112

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1.CSS：层叠样式表

初识CSS 结构

 <style>
        /* CSS的注释 */
        /* 这里写的都是CSS */
        /* 选择器 {CSS属性} */
        /* 选择器: 查找标签 */
        p {
            /* 文字颜色变成红色 */
            color: red;
            /* 字变大 px:像素 */
            font-size: 30px;
            /* 背景颜色 在P的范围 */
            background-color: green;
            width: 400px;
            height: 400px;
        }
    </style>

2.css有三种结构

内嵌式：CSS写在style标签中在head中，title 下

外联式：CSS写在一个单独的.CSS文件中。需要通过link 标签引入

行内式： CSS写在style属性中，配合JS使用

（1）内嵌式第一段代码就是，当前页面，小案例中使用

（2）外联式在head中，title 下引入link。在新建名为.css的文件

/* 选择器 {} */
p {
    color: red;
}

<link rel="stylesheet" href="./my.css">

多个页面，项目中使用

（3）行内式

<div style="color:rgb(25, 25, 139)"font-size:80px >这是div标签</div>

使用范围是：当前标签配合JS使用

3.标签选择器

结构：标签名{CSS属性名：属性值；}

选择的标签中所有内容都生效，比如说网页中所有内容都居中，就将所有内容都放在div中。

div{ : ;}

位置：title下面 head 中写在style 标签里面

head>
    
    <style>
        /* 标签选择器 */
        /* 就是以标签名命名的选择器 */
        p {
            color:blue;
        }
        /* 标签选择器，选择所有的标签来生效 */
    </style>
</head>
<body>
    <p>ppppppppppppp</p>
    <p>ooooooooo</p>
</body>
</html>

4.类选择器

结构：.类名{CSS属性名：属性值；}

class属性值为类名。

类名不可以数字或者下划线开头

一个标签可以有多个类名，类名之间用空格隔开。

类名可以重复，一个类选择器可以同时选中多个标签

 <title>Document</title>
    <style>
        .blue{
            color: blue;
        }
        .size {
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div class="blue size"> 这是一个类选择器</div>
    <div class="two"> 这是er个类选择器</div>
    <p class="blue"> 这是san个类选择器</p>
    <!-- 定义 使用才能生效 -->
    <!-- 标签 全选 类 单独赋予 -->
</body>

3.id选择器配合js使用的

结构：#id属性值{CSS属性名：属性值；}

所有标签上都有id属性

id属性在页面中唯一

一个标签只有一个id属性值

一个id选择器只有一个标签

 <style>
        #color{
            color :brown
        }
    </style>
</head>
<body>
    <div id="color">id选择器变成棕色了么？</div>
    <div id="color">id选择器变成棕色了么？</div>
    <!-- 配合js使用  -->
    <!-- 一个标签只能有一个属性值，配合js时会出错，虽然现在看不出来 -->

4.通配符选择器

结构 *{CSS属性名：属性值；}

用的少，只有及特殊才用

用于去除默认的内外边距

{

margin：0；

padding：0；

}

<style>
        * {color: aquamarine;}
    </style>
</head>
<body>
    <div>111</div>
    <p>2222</p>
    <h1>6789</h1>
    <span>9090</span>

5.字体font：

大小：font-size:数字+px;谷歌默认浏览器是16px;

粗细：font-weight:正常 normal 400 加粗 bold 700

倾斜: font-style: 正常 normal 倾斜 italic

字体：font-family:楷体，微软雅黑，......；

6.复合属性

font：style,weight,size/line-height,family;

eg: font:italic,700,66px/1.5,宋体;

字号字体不能省

 p{ 
                /* font:style weight size 字体； */
                /* font: italic 700 66px 宋体;
                font-style:normal;        */
                /*一个属性后面写多个值 叫做复合属性 */
                /* 颜色不属于这个font里面所以不能写 */
                font:100px 微软雅黑;
            }

7.文本样式

文本缩进：text-indent:数字+px/数字+em(1em等于一个字大小)

style>
    p{
        /* text-indent: 50px; */
        /* 首行缩进两个字大小 默认16px */
        /* text-indent: 32px; */
        font-size: 30px;
        /* em 一个字的大小 */
        text-indent: 2em;
    }
</style>
<body>
    <p>
       表示“我做过最明智的决定，就是选对了我的职业”，维持好的能量才能让自己更年轻，和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。

 
    </p>

内容对齐：text-align:left center right;

引用时找到父级标签引用，span\a\input\img对齐都用它

 <style>
        h1{
            text-align: center; 
            /* text-align: left; */
        }
        body{
            text-align: center;
        }
        /* 图片居中  */
    </style>
</head>
<body>
    <h1>新闻标题</h1>
    <p>
        表示“我做过最明智的决定，就是选对了我的职业”，维持好的能量才能让自己更年轻，和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。表示“我做过最明智的决定，就是选对了我的职业”
维持好的能量才能让自己更年轻，和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。


    </p>
    <img src="./photos/微信图片_2022031712242310.png" alt="显示失败了" width="200">
</body>

文本修饰：text-decoration: underline 下划线 line-thought 删除线 overline上划线 none 无装饰线

<style>
        div{
            text-decoration: underline;
        }
        /* 下划线 常用 */
        p{
            text-decoration: line-through;
        }
        /* 删除线 */
        span{
            text-decoration: overline;
        }
        /* 上划线 */
        a{
            text-decoration: none;
        }
        /* 超链接默认带下划线，这是把下划线去掉了 常用 */
    </style>
</head>
<body>
    <div>这是一个div标签</div>
    <p>这是一个P标签</p>
    <span>这是一个span标签</span>
    <br>
    <a href="https://blog.csdn.net/weixin_45762791?spm=1000.2115.3001.5343">我是超链接 点我呀！</a>
</body>

行高:line-height: ;

  p{
            /* line-height: 50px; */
            line-height: 1.5;
            /* 倍数 */
            /* 66px 宋体 倾斜 加粗 行高是2倍 */
            font:  italic 700 66px/2 宋体;
            /* 顺序是 ：style weight size/line-height family */
        }
    </style>
</head>
<body>
    <p>表示“我做过最明智的决定，就是选对了我的职业”，维持好的能量才能让自己更年轻，
和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。表示“我做过最明智的决定，就是选对了我的职业”
，维持好的能量才能让自己更年轻，和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。





    </p>

8.浏览器调试

打开网页，右键点击检查

点击左边元素的div 可以在右边样式中看到效果；

遇到删除线，是写了代码没生效

遇到黄色感叹号，是语法错误

方框里的对号，点掉可以调式效果

代码中的数字也可以调试大小

9.颜色常见取值

RGBA a(表示透明度): rgba(255,255,255,0.5)

十六进制表示法：#000000

10.标签居中 margin:0 auto;

可以让div 等大盒子居中

      div{
            width: 300px;
            height: 300px;
            background-color: pink;
            margin: 0 auto;
            /* 非常常用 */
        }
    </style>
</head>
<body>
    <div>

    </div>

11.综合案例总结

<!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>
        div{
        width:1000px;
        height:600px;
        /* background-color:pink; */
        margin: 0 auto;
           }
           
           /* p {
               text-align: center;
           } */
           /* 因为后面还有其他的段落，其他段落不居中 */
           .center{
               text-align: center;
           }
           .color1{
              color:  #808080;
           }
           .color2{
               color:#87ceed;
               font-weight: 700;
           }
           a{
              text-decoration: none; 
           }
           .suojin{
               text-indent: 2em;
           }
   </style>
    
</head>
<body>
   <div>
        <h1 class="center">表示“我做过最明智的决定，就是选对了我的职业”，
</h1>
       <p class="center">
        <span class="color1"> 2022-03-19 10:22 </span>
        <span class="color2">腾讯网 </span>
        <a href="#">收藏本文</a>
       </p>
       <hr>
       <p class="suojin">
        表示“我做过最明智的决定，就是选对了我的职业”，维持好的能量才能让自己更年轻，和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。
       </p>
       <p class="suojin">
        表示“我做过最明智的决定，就是选对了我的职业”，维持好的能量才能让自己更年轻，和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。表示“我做过最明智的决定，就是选对了我的职业”，维持好的能量才能让自己更年轻，和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。表示“我做过最明智的决定，就是选对了我的职业”，维持好的能量才能让自己更年轻，和霍汶希一起，选对赛道释放能量，焕醒秀发年轻力。


       </p>
   </div> 
</body>
</html>

写报道的时候，要所有内容都居中，就先用div包裹起来，进行居中

标签居中是margin:0 auto;

内容是 text-align: center;写在父级标签中

span 不自动跳行

div p 自成一行

洋洋拯救世界

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端自学第五天—— CSS基础

1.CSS：层叠样式表初识CSS 结构 <style> /* CSS的注释 */ /* 这里写的都是CSS */ /* 选择器 {CSS属性} */ /* 选择器: 查找标签 */ p { /* 文字颜色变成红色 */ color: red; /* 字变大 px:像素 */ font-size: 30px;
复制链接

扫一扫