JavaWeb-一篇文章带你入门CSS(笔记+案列)

news2024/11/28 6:45:07

目录

    • CSS是什么
      • 基本语法
    • CSS的引入方式
      • 内部样式表
      • 行内样式表
      • 外部样式表
    • 选择器
      • 基础选择器
        • 标签选择器
        • 类选择器
        • id选择器
        • 通配符选择器
      • 复合选择器
        • 后代选择器
        • 子选择器
    • 常用元素属性
      • 字体属性
      • 文本属性
      • 背景属性
      • 圆角矩形
    • 元素的显示模式
      • 块级元素
      • 行内元素
    • 我们可以使用display属性来修改元素的显示模式
      • 推荐网站

CSS是什么

CSS 是层叠样式表 (Cascading Style Sheets) 的简称,CSS 描述了 如何在屏幕、纸张或其他媒体上显示 HTML 元素.

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

基本语法

选择器 {一条或者N条声明}

选择器: 指定修改的是谁
声明:决定修改什么

例如:

    <!-- CSS 要写到 style 标签中  -->
<style>
        h1 {
        /* 设置字体颜色 */
        color: green;
        }
    </style>
     <h1> 要想生活过得去 </h1>

在这里插入图片描述

CSS的引入方式

内部样式表

写在 style 标签中. 嵌入到 html 内部,理论上来说 style 放到 html 的哪里都行,但是一般都是放到 head 标签中的.
上面举的例子就是使用这种内部样式表引入方式.

行内样式表

通过 style 属性, 来指定某个标签的样式,当然也就只生效于这个标签.

 <h1 style="color: royalblue;"> 要想生活过得去 </h1>

在这里插入图片描述

这种写法优先级较高,会覆盖其他引入方式的写法
例如:

<style>
        h1 {
        color: green;
        }
    </style>
     <h1 style="color: royalblue;"> 要想生活过得去 </h1>

在这里插入图片描述

外部样式表

  1. 创建一个CSS文件,在文件里写入需要修改的样式.
  2. 在HTML中通过link标签来进行CSS文件的引入
 <link rel="stylesheet" href="[文件路径名]">

选择器

选择器是用来选中页面中指定的标签元素来进行属性的设置

基础选择器

标签选择器

语法: 标签名 { }

 <style>
        div {
color: brown;
font-size: 100px;
        }
        span {
            color: chartreuse;
            font-size: 90px;
        }
    </style>
    <div>加油</div>
    <div>加油</div>
    <span>努力</span>
    <span>努力</span>

在这里插入图片描述
优缺点:
能快速为同一类型的标签都选择出来.
但是不能差异化选择.

类选择器

语法: .类名 { }

  <style>
.one {
    color: green;
}
.two {
    color: brown;
}
.span {
    color: gold;
}
    </style>
    <div class="one">今天星期六</div>
    <div class="two">今天星期六</div>
    <span class="three">今天星期六</span>

在这里插入图片描述

优缺点:

  • 差异化表示不同的标签
  • 可以让多个html标签被同一个css修改属性.

id选择器

语法: #id { }

<style>
        #1 {
            color: red;
    
        }
    </style>
    <div id="1">id选择器</div>

在这里插入图片描述

注意:

  • CSS 中使用 # 开头表示 id 选择器
  • id 是唯一的, 不能被多个标签使用

通配符选择器

语法: * { }

在这里插入图片描述

<style>
        * {
            color: green;
        }
    </style>
    <div>通配符</div>
    <span>通配符</span>

复合选择器

后代选择器

语法: 元素1 元素2 { }

元素之间使用空格分开
元素二是元素一的后代,可以是子元素,也可以是孙元素等等.
可以是任意基础选择器之间的组合

<style>
        ul .li {
           /* 标签选择器与类选择器 */
            color: green;
        }
        ul li {  
         /* 标签选择器与标签选择器 */
            color: red;
        }
    </style>
    <ul><li>fascinated</li>
    <li class="li">入迷的</li>
    </ul>

在这里插入图片描述

子选择器

语法: 元素1>元素2 { }

与后代选择器一样,但元素2只能是元素1的子标签

<style>
        div>p {
            color: green;
        }
    </style>
    <div>
        <p> 子类选择器</p>
        <span><p>孙类选择器</p></span>
    </div>

在这里插入图片描述

常用元素属性

字体属性

  • 设置字体
<style>
        .font-family .one {
font-family: '微软黑';
        }
        .font-family .two {
font-family: '宋体';
        }
    </style>
    <div class="font-family"><div class="one">
        早睡早起!
            </div>
            <div class="two">
        身体更好!
            </div></div>

在这里插入图片描述

字体名称可以用中文, 但是不建议
如果字体名有空格, 使用引号包裹
如果所使用字体找不到就会使用默认字体

  • 字体大小
<style>
                .font-size {
                    font-size: 40px;
                    font-family: '宋体';
                }
            </style>
            <div><p class="font-size">字体大小</p></div>

在这里插入图片描述

注意不要忘记字体大小单位px

  • 字体粗细
<style>
                div {
                    font-weight: bold;
                    /* bold=700 */
                }
            </style>
            <div>字体粗细</div>
            <span style="font-weight: 100;">字体粗细</span>

在这里插入图片描述

使用数字表示粗细
取值范围是 100 -> 900

  • 文字样式
<style>
                div .one {
                     /* 设置斜体 */
                    font-style: italic;
                }
                div .two {
                  /* 取消斜体 */
                    font-style: normal;
                }
            </style>
            <div><p class="one">斜体</p>
            <p class="two">取消斜体</p>
            </div>

在这里插入图片描述

文本属性

  • 文本颜色

在计算机中我们使用 R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果,针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
数值越大, 表示该分量的颜色就越浓. 255, 255, 255 就表示白色; 0, 0, 0 就表示黑色
设置文本颜色我们有三种设置方式分别为:

  1. 预定义的颜色值(比如直接写出颜色所对应的单纯)
  2. 十六进制形式 (#f0f0f0 )
  3. rgb(255, 255, 255)
  • 文本对齐
    用属性 text-align 来进行控制

  1. text-align:center -居中对齐

  2. text-align:eft -左对齐

  3. text-align:right -右对齐

  • 文本缩进
    用属性 text-indent 来进行控制
    text-indent: 值px ;
    单位可以使用 px 或者 em(em为当前文字的大小)

  • 文本装饰
    使用属性text-decoration 来进行修饰

  1. text-decoration : underline -下划线
  2. text-decoration : none -什么都没有,通常用来给链接标签进行去下划线处理

背景属性

  • 背景颜色
    使用background-color属性
    background-color: 指定颜色
<style>
            .one {
                background-color: green;
            }
            .two {
background-color:#f0f;
            }
            .three {
background-color: rgb(188,188,188);
            }
          </style>
          <div class="one">1</div>
          <div class="two">2</div>
          <div class="three">3</div>

在这里插入图片描述

  • 背景图片
    使用background-image属性来进行修改
    background-image: url(…);
<style>
            div {
                height: 400px;
                background-image: url(https://ts1.cn.mm.bing.net/th/id/R-C.7001bfb15f5a6ae18f5d8ab08aa841e2?rik=BkzF%2bDcWXFxAIg&riu=http%3a%2f%2fpic.qqbizhi.com%2fallimg%2fbpic%2f0%2f4000_2.jpg&ehk=Qx4cZP5pzezjYTRHXs3i8zvCfbSo6%2fKGdSbRIDRx%2b0U%3d&risl=&pid=ImgRaw&r=0);
                /* url 可以是绝对路径, 也可以是相对路径 */
            }
          </style>
          <div>
            1
          </div>

在这里插入图片描述

  • 背景平铺
    背景平铺通过background-repeat属性来进行修改
    background-repeat: [平铺方式]
  1. repeat: 平铺
  2. no-repeat: 不平铺
  3. repeat-x: 水平平铺
  4. repeat-y: 垂直平铺

圆角矩形

通过 border-radius 属性进行修改
border-radius:长度;

  • 生成圆形
    长度 为矩形的内切圆半径,所以要生成圆形只需要让长度为正方形的一半即可.
<style>
            .one {
                background-color: chartreuse;
                width: 100px;
                height: 100px;
                border-radius: 50px;
            }
          </style>
          <div class="one">

          </div>

在这里插入图片描述

  • 生成圆角矩形
    生成圆角矩形也很简单,将 border-radius 的属性值设为矩形高度的一半即可
 <style>
            .one {
                background-color: chartreuse;
                width: 200px;
                height: 100px;
                border-radius: 50px;
            }
          </style>
          <div class="one">

          </div>

在这里插入图片描述

元素的显示模式

块级元素

常见的块级元素都有:h1 - h6 , p ,div , ul ,ol ,li 等

 <style>
                .one .one1 {
                    font-weight: bold;
                }
                .one .one2 {
                    font-weight: 200;
                    color: green;
                }
            </style>
            <div class="one">
                <div class="one1"  >
               块级元素
                </div>
                <div class="one2">
               块级元素
                </div>
            </div>

在这里插入图片描述
由上述结果可见块级元素是独占一行的(代码中并没有使用换行).

特点:

  1. 独占一行.
  2. 高度, 宽度, 内外边距, 行高都可以控制.
  3. 不设置宽度的话,默认跟父级元素同宽.

行内元素

常见的行内元素: a , b , i , s , u , span

           <style>
                .one {
          width: 200px;
                }
                .two {
          width: 600px;
                }
            </style>
          <span class="one">
        无语义标签
          </span>
          <span class="two">
        无语义标签
          </span>

在这里插入图片描述
我们可以发现设置高度, 宽度, 行高无效.

特点:

  1. 不独占一行,一行可以显示多个.
  2. 设置高度, 宽度, 行高无效.
  3. 左右外边距有效,内边距有效.

我们可以使用display属性来修改元素的显示模式

  • display: block 改为块级元素
  • display: inline 改为行内元素

推荐网站

如果还想了解更多的css知识可进入链接网站继续进行学习.

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/524503.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

对称加密/非对称加密

对称加密/非对称加密

古典密码学 起源于古代战争:在战争中&#xff0c;为了防止书信被截获后重要信息泄露&#xff0c;人们开始对书信进行加密。 移位式加密 如密码棒&#xff0c;使用布条缠绕在木棒上的方式来对书信进行加密。 加密算法&#xff1a;缠绕后书写 密钥&#xff1a; 木棒的尺寸 替…
阅读更多...
[笔记]深入解析Windows操作系统《四》管理机制

[笔记]深入解析Windows操作系统《四》管理机制

文章目录 前言4.1注册表查看和修改注册表注册表用法注册表数据类型注册表逻辑结构HKEY_CURRENT_USERHKEY_USERS 实验&#xff1a;观察轮廓加载和卸载HKEY_CLASSES_ROOTHKEY_LOCAL_MACHINE 实验:离线方式或远程编辑BCDHKEY_CURRENT_CONFIGHKEY_PERFORMANCE_DATA 前言 本章讲述了…
阅读更多...
day3_垃圾回收器

day3_垃圾回收器

文章目录 Serial回收器ParNew回收器Parallel Scavenge回收器Serial Old回收器Parallel Old回收器CMS&#xff08;Concurrent Mark Sweeping)回收器G1 主要有7种垃圾回收器&#xff0c;如下所示&#xff1a; 其中有直线关联的表示&#xff0c;这2种垃圾回收器可以配合使用的。 S…
阅读更多...
大模型之PaLM2简介

大模型之PaLM2简介

1 缘起 大模型时代。 时刻关注大模型相关的研究与进展&#xff0c; 以及科技巨头的商业化大模型产品。 作为产品&技术普及类文章&#xff0c;本文将围绕PaLM2是什么、特点、如何使用展开。 想要了解更多信息的可以移步官方网站提供的参考文档&#xff0c;后文会给出相关链…
阅读更多...
Oracle11g服务说明

Oracle11g服务说明

一、服务说明 1.OracleDBConsoleorcl&#xff1a;非必须启动 Oracle数据库控制台服务&#xff0c;orcl是Oracle的实例标识&#xff0c;默认的实例为orcl。在运行Enterprise Manager&#xff08;企业管理器OEM&#xff09;的时候&#xff0c;需要启动这个服务。 2.OracleJobS…
阅读更多...
一文了解异步编程

一文了解异步编程

promise 什么是promise promise是异步编程的一种解决方案&#xff0c;从语法上来说&#xff0c;Promise是一个对象&#xff0c;从它可以获取异步操作的消息 ES6规定&#xff0c;Promise对象是一个构造函数&#xff0c;接受一个函数作为参数&#xff0c;这个函数会立即执行&a…
阅读更多...
Long类型返回前端精度丢失

Long类型返回前端精度丢失

【1】给前端返回Long会出现精度丢失问题 在《阿里巴巴Java开发手册》中&#xff0c;有一条关于前后端超大整数返回的规约&#xff0c;具体内容如下&#xff1a; 【2】问题复现 后端直接用postman测试接口&#xff0c;返回数据没有问题。但是前端访问接口的时候&#xff0c;发…
阅读更多...
系统化了解Micrometer

系统化了解Micrometer

本文从官方文档整理出一篇系统化全面了解的文章, 后续可能会慢慢补上源码层面的解析: https://micrometer.io/docs 学习本文的目的在于深入了解中间件的监控模块的设计, 先看看主流的做法于核心思想 本文的引用来的笔者的理解于备注 需要做的是: 先理解功能存在的理由设计模式…
阅读更多...
kibana 代码执行 （CVE-2019-7609）

kibana 代码执行 （CVE-2019-7609）

漏洞原理 “原型污染”是一种针对JS语言开发的攻击方法。JS语言中&#xff0c;每一个对象都是有其原型&#xff08;proto&#xff09;的&#xff0c;而该原型又有其自己的原型对象&#xff0c;直到某个对象的原型为null。而如果JS对其中定义的对象原型的属性读写缺乏控制&…
阅读更多...
进程程序替换+简易版shell实现

进程程序替换+简易版shell实现

索引 进程程序替换如何进行程序替换不同程序替换函数之间的区别系统接口调用其他语言的函数替换函数execle 简易版shell实现 进程程序替换 什么是进程程序替换&#xff1f; 指在一个正在运行的进程中&#xff0c;将原来的程序替换成新的程序的过程。 eg&#xff1a;如果我们想…
阅读更多...
I IntelliJ IDEA 2023.1 最新解锁方式，支持java20，让Coding飞一会儿

I IntelliJ IDEA 2023.1 最新解锁方式，支持java20，让Coding飞一会儿

IntelliJ IDEA 2023.1 最新变化 在 IntelliJ IDEA 2023.1 中&#xff0c;我们根据用户的宝贵反馈对新 UI 做出了大量改进。 我们还实现了性能增强&#xff0c;从而更快导入 Maven&#xff0c;以及在打开项目时更早提供 IDE 功能。 新版本通过后台提交检查提供了简化的提交流程…
阅读更多...
Android不基于第三发依赖包解析shp文件（2）

Android不基于第三发依赖包解析shp文件（2）

接着上篇文章继续 2）Point （点）   一个 Point 由一对双精度坐标组成，存储顺序为 X，Y。    /*** PointGeometry记录读取* */static Geometry renderPointGeometry(byte[] recordContent,GeometryFactory geometryFactory) {int shapetype2
阅读更多...
N轴机械臂的MDH正向建模，及python算法

N轴机械臂的MDH正向建模，及python算法

目录 一、前言二、三维空间的坐标系变换三、MDH建模要点四、MDH的变换矩阵推导五、机械臂MDH的python模型六、python源码 一、前言 如果机器人工程师缺乏机器人学理论的支撑和足够的认识&#xff0c;那么随着机器人项目的深入推进&#xff0c;可能会越走越艰难&#xff0c;所谓…
阅读更多...
【Lambda】集合的Lambda表达式

【Lambda】集合的Lambda表达式

【Lambda】集合的Lambda表达式 【一】Stream的方法介绍【1】Stream里常用的方法【2】collect(toList()) & filter【3】map【4】flatMap【5】max&min【6】reduce 【二】常用案例总结【1】准备方法查询数据库获取List结果【2】取值【3】分组【4】去重【5】排序【6】list的…
阅读更多...
uniapp制作水印相机给图片添加水印并且保存图片至本地

uniapp制作水印相机给图片添加水印并且保存图片至本地

uniapp保存文件的三种方式 文件主要分为两大类&#xff1a; 1.代码包文件&#xff1a;代码包文件指的是在项目目录中添加的文件。 2.本地文件&#xff1a;通过调用接口本地产生&#xff0c;或通过网络下载下来&#xff0c;存储到本地的文件。 其中本地文件又分为三种&#…
阅读更多...
【K8s】Service详解

【K8s】Service详解

文章目录 一、Service介绍1、认识Service2、kube-proxy的三种工作模式3、Service的类型 二、Service的使用1、实验数据准备2、Service类型为ClusterIP补充&#xff1a;Endpoints补充&#xff1a;负载分发策略 3、Service类型为HeadLiness3、Service类型为NodePort4、Service的类…
阅读更多...
Ovito渲染技巧之体系边界识别

Ovito渲染技巧之体系边界识别

关注 M r . m a t e r i a l , \color{Violet} \rm Mr.material\ , Mr.material , 更 \color{red}{更} 更 多 \color{blue}{多} 多 精 \color{orange}{精} 精 彩 \color{green}{彩} 彩&#xff01; 主要专栏内容包括&#xff1a; †《LAMMPS小技巧》&#xff1a; ‾ \textbf…
阅读更多...
性能、性能还是性能---下一代Android性能框架分析

性能、性能还是性能---下一代Android性能框架分析

性能优化的重要性和难度毋庸置疑&#xff0c;事实上&#xff0c;性能优化也是一个永无止境的游戏&#xff0c;总会发现有一些东西需要优化。但是不可避免的是&#xff0c;这也是一个边际效益递减的事情&#xff0c;项目或应用获得的收益在一定程度上也会逐渐降低。What’s new …
阅读更多...
ReentrantLock 原理

ReentrantLock 原理

目录 ReentrantLock 概述 ReentrantLock 的原理 什么是 AQS ? 获取锁资源(以⾮公平锁为例) tryAcquire addWaiter acquireQueued 释放锁资源 ⾮公平锁体现在哪⾥&#xff1f; 调试代码 总结 ReentrantLock 概述 ReentrantLock是Lock接⼝的默认实现&#xff0c;是⼀…
阅读更多...
【Linux】-关于Linux的指令（下）

【Linux】-关于Linux的指令（下）

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树 ❤️‍&#x1fa79;作者宣言&#xff1a;认真写好每一篇博客 &#x1f4a8;作者gitee:gitee &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 文章目录 前言一、时间相关的指令二、cal指令三、find -name指…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023