CSS学习笔记01

最新推荐文章于 2024-08-24 13:47:49 发布
最新推荐文章于 2024-08-24 13:47:49 发布
阅读量130 收藏
点赞数
文章标签： css 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52117632/article/details/127187744
版权

目录

CSS书写位置

行内式

内嵌式

 外链式

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

 一个小练习

 字体样式

 字符之间的距离

行间距 

 文字阴影

CSS书写位置

行内式

<body>
 <!-- 行内式，写在标签内部，通过style属性，里面的属性和属性值通过冒号连接，多个样式属性之间用分号 -->
    <!-- 注意用冒号连接，用分号结束一个属性 -->
    <p style="color: purple;font-size: 60px;">我是段落2（行内式）</p>
</body>

 

内嵌式

<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代码的区域 -->
    <!-- 书写规范：通过标签，然后书写{},把要设置的样式都书写在这个括号里面，属性和属性值之间用冒号隔开，用分号结束 -->
    <style>
        
        p{
            color:pink;
            font-size: 50px;
        }

    </style>
    
</head>
<body>
 <p>我是段落3（内嵌式）</p>
</body>

 外链式

<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标签 href属性 找到css文件 -->
     <link rel="stylesheet" href="./css/01.css">
</head>
<body>
   
    <p>我是段落4（外链式）</p>

</body>

 

 

基础选择器

标签选择器

类选择器

id选择器

通配符选择器

<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>
      /* 标签选择器，会选择到页面中所有p标签  */
        p{
            color: blueviolet;
            font-size:30px;
        }

        /* 类选择器，通过给标签起名字：class=“名字” 通过.+名字 找到标签 */
        .one{
            color:aquamarine;
        }

        .two{
            color: brown;
        }

        .three{
            color:coral;
        }

        .big{
            font-size: 30px;
        }
 
        /* id选择器：#＋id名 找到标签 */
        #a{
            color: aquamarine;
        }
        #b{
            color: blueviolet;
        }
        #c{
            color: brown;
        }

       /* 通配符选择器 选择到页面中的所有标签 包括body标签，一般用于页面初始化 */
        *{
            font-size: 30px;
        }

    </style>
</head>
<body>
    <p>我是第一个（标签选择器）</p>
    <p>我是第二个（标签选择器）</p>
    <p>我是第三个（标签选择器）</p>

    <!-- 类选择器：注意是用class给标签起名 -->
    <!-- 起名规范：  不建议用下划线，可以用-（短横线）连接 
                    不能以数字开头
                    起有意义的名字
                    不能包含特殊字符（除了$,-）-->

    <div class="one">我是第一个（类选择器）</div>
    <!-- 多类名选择器：一个标签拥有多个类名，类名之间用空格隔开 -->
    <div class="two big">我是第二个（多类选择器）</div>
    <div class="three">我是第三个（类选择器）</div>

    <!-- id选择器，id名不能重复 -->
    <div id="a">我是第一个(id选择器)</div>
    <div id="b">我是第二个(id选择器)</div>
    <div id="c">我是第三个(id选择器)</div>

    <span>我是span标签</span>
</body>

 一个小练习

<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>

      /* 多个标签一种颜色，.标签名用逗号隔开 */
        /* .blue,.darkgrey{
          color: aqua;

        } */

        /* 多个标签的样式相同则给标签起相同的类名 */
        
        .blue{
            color:blue;
        }

        .red{
            color:red;
        }

        .yellow{
            color: yellow;
        }

        .green{
            color:greenyellow;
        }

        .darkgrey{
            color:darkgray;
        }

    </style>
</head>


<body>
    <span class="blue">G</span>
    <span class="red" >o</span>
    <span class="yellow">o</span>
    <span class="blue">g</span>
    <span class="green">l</span>
    <span class="red">e</span>
    <span class="darkgrey">b</span>
    <span class="darkgrey">o</span>
    <span class="darkgrey">t</span>
</body>

 字体样式

<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>

        p{
            
            /* 字体大小 font-size 单位px 像素 */
            font-size: 30px;

            /* 字体粗细 font-weight normal 正常 lighter 细 bold 粗 */
            /* 100细  400正常 700加粗 以数字表示字体粗细的时候 取值范围是100-900 */
            font-weight: 300;
            
            /* 字体 font-family 尽量不用中文 */
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        
            /* 字体风格 font-style 通常不写斜体，用于把斜体的文字变正常（normal）  */
            font-style: italic;
        }

        em{
            font-style: normal;
        }

        div{
            /* 综合设置样式 */
            /* font:font-style font-weight font-size/line-height font-family; */
             /* 不可缺少的两个属性：font-size 和font-family 书写顺序固定 */
            font:italic bold 50px "Franklin Gothic Medium";
        }

    </style>
</head>
<body>
    <p>我是一段文字</p>
    <em>我本来是倾斜的</em>
    <div>综合设置样式</div>
</body>

 字符之间的距离

<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>
        p{

            /* letter-spacing:字符和字符之间的距离 */
             letter-spacing:10px;

          /* word-spacing:单词和单词之间的距离，中文无效 */
             word-spacing: 40px;
        }
     </style>
   
</head>
<body>
    
    <p>我是多啦不能没有梦</p>
    <p>I like pizza.</p> 
</body>

行间距 

<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>
        p,
        h2{
              background-color: aqua;

              /* line-height: 行高; */
               line-height: 60px;
        }
    </style>
</head>
<body>
    <p>我是文字</p>
    <h2>我是标题</h2>
    
</body>

 文字阴影

<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>
        body{
            background-color: #333;
        }

        div{
            font:700 50px "Microsoft YaHei";
            /* 水平阴影位置， 竖直阴影距离， 模糊的距离（负值阴影会消失），阴影颜色 */
            text-shadow: 1px 1px 1px red;
        }

        p{
            font:700 50px "Microsoft YaHei";
            text-shadow: -1px -1px 1px white,1px 1px 1px black;
            color: #333;
        }
    </style>
</head>
<body>
    <div>我是一个有影子的文字</div>
    <p>
        我是凸起的文字
    </p>
    
</body>

 

多啦不能没有梦
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS 学习笔记
09-25
在CSS学习过程中，了解并熟练掌握ID和Class的使用是非常基础且重要的。ID与Class都是CSS选择器，但它们有着不同的特性和应用场景。 ID选择器（#）的主要优点在于其高优先级，这意味着当需要为特定元素赋予特殊样式...
css经典学习笔记.zip
11-01
综上所述，《CSS经典学习笔记》旨在提供一个全面的CSS学习路径，无论你是初学者还是有经验的开发者，都能从中受益，提升你的CSS技能和网页设计能力。通过深入实践和不断探索，你会发现CSS不仅可以打造出美观的界面，...
CSS入门学习笔记+案例
热门推荐
itboy
06-16 30万+
CSS入门学习 一、CSS简介 1、什么是CSS CSS：Cascading Style Sheet 层叠样式表 是一组样式设置的规则，用于控制页面的外观样式 2、为什么使用CSS 实现内容与样式的分离，便于团队开发 样式复用，便于网站的后期维护 页面的精确控制，让页面更精美 3、CSS作用 页面外观美化 布局和定位 二、基本用法 1、CSS语法 <head> <style> 选择器{ 属性名：属性值; 属性名：属性值; } </style> &l
前端css基础学习笔记
a_big_panda的博客
01-22 946
例如： 效果：例如：效果：例如：效果：选择页面中对应的标签（找她），方便后续设置样式（改她）例如：效果：例如：效果：注意：一个id选中多个标签也有效果，但不符合规范，规范是一个id选择器只选中一个标签例如：效果：例如：效果：例如：效果：注意点：例如：效果：例如：效果：注意：注意：例如：效果：例如：效果：注意：例如：效果：例如：效果：注意：如果需要让文本水平居中，text-align属性给文本所在标签（文本的父元素）设置例如：效果：注意：开发中会使用text-decoration：none；清除a标签默认的下
CSS学习笔记
m0_58761900的博客
09-18 3059
5.1 边框:border 5.2 内边距：padding 5.3 外边距:margin 5.4 块级元素的水平居中 7.1 弹性布局：flex 7.2 水平方向的排列方式：justify-content 7.3 垂直方向的排列方式：align-items
css学习笔记1
qq_42236791的博客
12-12 945
HTML（结构）、CSS（表现）、行为（JavaScript）CSS的全称：层叠样式表（Cascading Style Sheets）。CSS也是一种标记语言，用于给HTML结构设置样式，例如：文字大小、颜色、元素宽高等。简单理解：CSS可以美化HTML，让HTML更漂亮。核心思想：HTML搭建结构，CSS添加样式，实现了：结构与样式的分离。
CSS学习笔记目录
wz_1992的博客
05-30 469
CSS学习笔记之基础教程（一） CSS学习笔记之基础教程（二） CSS学习笔记之中级教程（一） CSS学习笔记之中级教程（二） CSS学习笔记之中级教程（三） CSS学习笔记之高级教程（一） CSS学习笔记之高级教程（二） CSS学习笔记之高级教程（三） CSS学习笔记之高级教程（四）
【CSS学习笔记】
weixin_45037690的博客
08-12 805
Cascading Style Sheet 层叠样式表CSS：表现（美化网页）字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动CSS1.0CSS2.0：DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得简单，SEOCSS2.1：浮动，定位CSS3.0：圆角、阴影、动画…浏览器兼容性。
EPICS工具CSS学习笔记
qq_43456972的博客
10-13 2333
控制系统工作室(CSS)是一项实现控制系统相关的应用，主要针对的是操作员界面。它是基于目前的软件技术（Java、Eclipse），并特别强调了互操作性。 使用Centos7.0系统作为EPICS环境开发，搭建了CSS基础的控件操作，并成功运行。
css学习笔记之展开列表图标动画
weixin_65808257的博客
04-07 2433
蓝色界面”风格的填充的星图标欢迎下载填充的星矢量图标，“蓝色界面”风格。格式有png、svg、pdf、html代码。可对填充的星图标、符号进行修改、调整大小、修改颜色。今天在这个网站看到了上面类似的效果，然后就想弄一个，然后就有了上面的。
h5+css学习笔记
m0_62410752的博客
03-15 407
个人学习笔记，自己看的
css学习笔记
12-20
本人自己学习CSS过程中亲自总结的思维导图，结构清晰，重点突出，便于记牢
HTML+CSS学习笔记.zip
01-01
HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记HTML+CSS学习笔记 ...
CSS中的元素布局与定位详细说明
最新发布
weixin_43354152的博客
08-24 583
在CSS开发中，很重要的一个工作就是根据UI设计稿，进行元素的布局与定位，使得元素（比如某一段文本、按钮、图片等）显示在页面正确的位置。本文就元素的布局与定位方面，做一些讲解和说明。
使用 Tailwind CSS 实现水平和垂直居中对齐的方法
Chloeeeeeeee的博客
08-20 227
使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位
CSS有趣知识
weixin_42376775的博客
08-20 247
5.分开写：border-top-ldft-radius、border-top-right-radius、border-bottom-right-radius和border-bottom-left-radius。2.如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%4.该属性是一个简写属性，可以跟四个值，分别代表左上角，右上角、右下角、左下角。CSS3中新增了盒子阴影，我们可以使用box-shadow属性为盒子添加阴影。3.如果是个矩形，设置为高度的一半就可以做。
PHP 实战：动态更改 CSS 值
Rverdoser的博客
08-21 308
这段代码演示了如何在PHP中动态设置CSS变量的值，并在HTML文档中使用这些变量。它使用CSS自定义属性（也称为CSS变量），然后通过。选择器在文档的任何地方使用它们。这样做可以让你在不修改CSS文件的情况下，根据用户的不同或其他上下文来改变样式。
Tailwind CSS的介绍和使用
mq1314520_zhl的博客
08-21 338
Tailwind CSS 的工作原理是扫描所有 HTML 文件、JavaScript 组件以及任何 模板中的 CSS 类（class）名，然后生成相应的样式代码并写入 到一个静态 CSS 文件中。他快速、灵活、可靠，没有运行时负担。Font Family - TailwindCSS中文文档 | TailwindCSS中文网。
CSS学习笔记：WEB开发中的样式精华
"很好的css学习笔记，pdf格式（64页），包含了CSS+DIV的学习内容，适合初学者逐步了解和掌握CSS技术。" 这篇CSS学习笔记详细介绍了CSS的基础知识，包括其起源、作用以及如何改善HTML页面的设计。CSS，即层叠样式表...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值