CSS的使用

最新推荐文章于 2024-05-21 18:29:50 发布
最新推荐文章于 2024-05-21 18:29:50 发布
阅读量3.8k 收藏 38
点赞数 8
分类专栏： JavaEE Java 文章标签： java-ee java intellij-idea
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_48273471/article/details/124368977
版权
Java 同时被 2 个专栏收录
76 篇文章 3 订阅
订阅专栏
JavaEE
41 篇文章 2 订阅
订阅专栏

目录

1. CSS基本语法

2. CSS类型

2.1 行内样式（适用范围最小）

2.2 内部样式（适用范围适中）

2.3 外部样式（适用范围最大）

3. 多种样式优先级

4. 选择器 -- 选择器种类

4.1标签选择器

 4.2 类选择器

4.3 id 选择器

4.4通配符选择器

 5. 常用元素属性

5.1 字体属性

5.1.1 字体设置

 5.1.2 字体大小

5.1.3 字体粗细

 5.1.4 文字样式 

 5.1.5 文本属性

5.2 背景属性

5.2.1 背景颜色

 5.2.2 背景图片

5.2.3 背景平铺

5.2.4 背景尺寸

6. 页面布局---盒模型

6.1 边框 border

6.2 内边距 padding

6.3 外边距 margin

1. CSS基本语法

选择器 + {⼀条/N条声明}
● 选择器决定针对谁修改 。
● 声明决定修改啥.。
        <style>
           p {
               /* 设置字体颜⾊ */
               color: red;
               /* 设置字体⼤⼩ */
               font-size: 30px;
          }
        </style>
        <p>hello</p>
        
注意:
        ● CSS 要写到 style 标签中(后⾯还会介绍其他写法)
        ● style 标签可以放到⻚⾯任意位置. ⼀般放到 head 标签内.
        ● CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换) .

2. CSS类型

CSS 类型分为以下 3 种：
        1. ⾏内样式
        2. 内部样式
        3. 外部样式

2.1 行内样式（适用范围最小）

通过 style 属性, 来指定某个标签的样式. 只适合于写简单样式. 只针对某个标签⽣效。
缺点: 不能写太复杂的样式。
这种写法优先级较⾼, 会覆盖其他的样式.
<h3 style="color: green">填写简历信息</h3> 

2.2 内部样式（适用范围适中）

写在 style 标签中，嵌⼊到 html 内部的样式叫做内部样式。
理论上来说 style 放到 html 的哪⾥都⾏. 但是⼀般都是放到 head 标签中.
优点: 这样做能够让样式和⻚⾯结构分离.
缺点: 分离的还不够彻底. 尤其是 css 内容多的时候.
内部样式基本⽤法如下：
        
        <!DOCTYPE html>
        <html lang="en">
        <head>
           <meta charset="UTF-8">
           <title>Document</title>
           <style>
               /* ⾏内样式 */
               body{
                   color: green;
                   font-size: 54px;
              }
           </style>
        </head>
        <body>
           你好 CSS！
        </body>
        </html>

  

2.3 外部样式（适用范围最大）

实际开发中最常⽤的⽅式.
        1. 创建⼀个 css ⽂件.
        2. 使⽤ link 标签引⼊ css

  

注意: 不要忘记 link 标签调⽤ CSS, 否则不⽣效。rel 属性是必须的，规定当前⽂档与被链接⽂档/资源之间的 关系。stylesheet 表示要导⼊的样式表的 URL。
优点: 样式和结构彻底分离了.
缺点: 受到浏览器缓存影响, 修改之后 不⼀定⽴刻⽣效.

 

 

项目中的文件分为静态文件（html, css, js,png）浏览器会进行缓存 和  动态文件（动态程序） 一般不进行缓存 ，但是花费时间。

 解决方案： 清除浏览器的缓存，或 强制刷新（Crtl + F5），或直接更换UL地址（即给地址添加无用的参数）

3. 多种样式优先级

 由此可见：

优先级：行内样式 > 内部样式 > 外部样式（离它最近的样式。）

4. 选择器 -- 选择器种类

常⻅选择器
        ● 标签选择器
        ● 类选择器
        ● id 选择器
        ● 通配符选择器

4.1标签选择器

快速的将同一类型的标签选择出来，但是不能差异化选择。

 4.2 类选择器

可以差异化表示不同的标签，也可以让多个标签使用同一个标签。

       

 语法：

1. 类名⽤ . 开头的。
2. 下⽅的标签使⽤ class 属性来调⽤。
3. ⼀个类可以被多个标签使⽤, ⼀个标签也能使⽤多个类，多个类名使用空格分割。
4. 如果是⻓的类名, 可以使⽤ - 分割。
5. 不使⽤纯数字, 或者中⽂, 以及标签名来命名类名。

4.3 id 选择器

语法：

1. # 开头
2. id 选择器的值和 html 中某个元素的 id 值相同
3. html 的元素 id 不必带 #
4. id 是唯⼀的, 不能被多个标签使⽤ (和 类选择器 最⼤的区别)

    

类比：姓名可以重复，是类选择器，身份证号是id选择器，不可以重复。 

4.4通配符选择器

    


 5. 常用元素属性

5.1 字体属性

5.1.1 字体设置

1. 不建议用中文做字体名称。
2. 多个字体之间使⽤逗号分隔。 (从左到右查找字体, 如果都找不到, 会使⽤默认字体. )
3. 如果字体名有空格, 使⽤引号包裹。
4. 建议使⽤常⻅字体, 否则兼容性不好。

 

 5.1.2 字体大小

5.1.3 字体粗细

       

 5.1.4 文字样式 

 5.1.5 文本属性

<style>
   .color {
       color: red;
       /* color: rgb(255, 0, 0); */
       /* color: #ff0000; */
  }
</style>
<div class="color">这是⼀段话</div>
   .text-align .one {
       text-align: left;
  }
   .text-align .two {
       text-align: right;
  }
   .text-align .three {
       text-align: center;
  }
</style>
<div class="text-align">
   <div class="one">左对⻬</div>
   <div class="two">右对⻬</div>
   <div class="three">居中对⻬</div>
</div>

 

 

5.2 背景属性

5.2.1 背景颜色

 

 5.2.2 背景图片

注意：

1. url不能遗漏

2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加.
background-image: url(...);
<style>
           .bgi .one {
               background-image: url(rose.jpg);
               height: 300px;
  }
</style>
<div class="bgi">
           <div class="one">背景图⽚</div>
</div>

5.2.3 背景平铺

background-repeat: [平铺⽅式]
<style>
   .bgr .one {
       background-image: url(rose.jpg);
       height: 300px;
       background-repeat: no-repeat;
  }
   .bgr .two {
       background-image: url(rose.jpg);
       height: 300px;
       background-repeat: repeat-x;
  }
   .bgr .three {
       background-image: url(rose.jpg);
       height: 300px;
       background-repeat: repeat-y;
  }
</style>
<div class="bgr">
   <div class="one">不平铺</div>
   <div class="two">⽔平平铺</div>
   <div class="three">垂直平铺</div>
</div>
重要取值:
        repeat: 平铺（默认）
        no-repeat: 不平铺
        repeat-x: ⽔平平铺
        repeat-y: 垂直平铺
背景颜⾊和背景图⽚可以同时存在. 背景图⽚在背景颜⾊的上⽅.

5.2.4 背景尺寸

background-size: length | percentage | cover | contain;
<style>
   .bgs .one {
       width: 500px;
       height: 300px;
       background-image: url(rose.jpg);
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
  }
</style>
<div class="bgs">
   <div class="one">背景尺⼨</div>
</div>
注意contain 和 cover 的区别。当元素为矩形（不是正方形时），区别比较明显。
cover: 把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域。背景图像的某些部分也许⽆法显示在背景定位区域中。
contain: 把图像扩展⾄最⼤尺⼨，以使其宽度和⾼度完全适应内容区域.

6. 页面布局---盒模型

每一个HTML 元素就相当于是⼀个矩形的 "盒⼦" 。这个盒⼦由这⼏个部分构成：

● 边框 border
● 内容 content
● 内边距 padding
● 外边距 margin

6.1 边框 border

基础属性：

粗细: border-width
样式: border-style , 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜⾊: border-color
border-top / bottom / left / right （顺时针方向）

6.2 内边距 padding

默认内容是顶着边框来放置的。
基础写法：
● padding-top
● padding-bottom
● padding-left
● padding-right

复合写法：

padding : 5px ; 表示四个⽅向都是 5px
padding : 5px 10px ; 表示上下内边距 5px , 左右内边距为 10px
padding : 5px 10px 20px ; 表示上边距 5px , 左右内边距为 10px , 下内边距为 20px
padding : 5px 10px 20px 30px ; 表示 上 5px , 右 10px , 下 20px , 左 30px (顺时针)

6.3 外边距 margin

基础写法：

● margin-top
● margin-bottom
● margin-left
● margin-right

复合写法：

margin: 10px; // 四个⽅向都设置
margin: 10px 20px; // 上下为 10, 左右 20
margin: 10px 20px 30px; // 上 10, 左右 20, 下 30
margin: 10px 20px 30px 40px; // 上 10, 右 20, 下 30, 左 40
块级元素⽔平居中：
前提:
        指定宽度(如果不指定宽度, 默认和⽗元素⼀致)
        把⽔平 margin 设为 auto
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
这个⽔平居中的⽅式和 text-align 不⼀样：
        margin: auto 是给块级元素⽤得到.
        text-align: center 是让⾏内元素或者⾏内块元素居中的.
（ 对于垂直居中, 不能使⽤ "上下 margin 为 auto " 的⽅式 ）
div {
   width: 500px;
   height: 200px;
   background-color: red;
   margin: 0 auto;
}

Youcan.
关注
  • 8
    点赞
  • 踩
  • 38
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
CSS基本使用方法
qq_45782839的博客
11-27 1480
1.行内样式，引入style样式 2.内部样式表 在head标签里，统一改想改的标签 <style> h4 { color: aqua; } </style> 3.外部样式表:在css文件里写 需要一个连接<link href="style.css" type="text/css" rel="stylesheet"/> 4.css选择器是选择标签的 5.类选...
CSS 使用规则总结
09-25
CSS 使用规则总结，对于广大前端开发爱好者，是必须要知道的一些技巧。
CSS的使用与方法
m0_58310590的博客
03-23 1052
CSS盒子模型是用来描述元素在页面布局中所占空间的模型。每个HTML元素被看作是一个矩形的盒子。这个盒子包括内容区域、内边距、边框和外边距四个部分。盒子模型并不仅仅是内容与边界的距离，而是包括了内容、内边距、边框和外边距，这些部分共同构成了一个元素在页面中所占据的空间。相对定位相对于标签原来的位置移动 relative绝对定位(常用)相对于已经定位过的父标签做移动，如果没有父标签那么就以body为父标签当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位。
CSS基础以及使用方法
最新发布
weixin_53598426的博客
05-21 936
CSS基础以及使用方法
Java web前端（CSS）
文帝的博客
12-30 329
CSS的简述 1.什么是CSS Cascading Style Sheet 层叠级联样式表 CSS :层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。多个样式可以层层覆盖叠加，如果不同...
CSS使用方法
我爱编程持之以恒
05-07 1601
css就是规定各种显示风格样式的名称和设置值的规则。它有4种方式可以将样式加入到HTML中，分别是内联样式表、嵌入样式表、外联样式表、输入样式表。        ①内联样式表：在html标签中直接使用style属性。它适用于只需要将一些简单的样式应用于某个独立的元素的情况。在使用时，需要在head标签中添加meta标签，如下： 使用方法如下：        ②嵌入样式表：在
CSS三种使用方法
、moddemod
02-09 649
CSS样式的三种使用方法 行内样式   行内样式是样式表中最为直接的一种，它直接对HTML的标记使用style属性，然后将css代码直接写在其中，即样式与HTML标记写在一行。 <p style="color:red; font-weight:bold;">行内样式</p> 嵌入样式   嵌入样式就是将CSS样式规则编写在HTML代码中的标记之间，并且用标记进行声...
Bootstrap CSS使用方法
11-30
Bootstrap中CSS的使用方法，供大家参考，具体内容如下 1、GitHub上这样介绍 bootstrap： :ballot_box_with_check: 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 :ballot_box_with_...
CSS使用技巧总结
09-22
偶尔看到一篇CSS常用技巧的总结文章,本人整理了一下,晒出来和大家分享，希望可以帮助你们
css使用自定义图标字体
09-05
css实现使用自定义图标字体，像使用字体那样使用图标，可以调整大小和颜色。入门级别源代码。交流文章可以去https://blog.csdn.net/zhaoyang314?spm=1000.2115.3001.5343查看
CSS 使用Sprites技术实现圆角效果
10-22
使用CSS Sprites技术画圆角，简单的讲就是把一个圆做在一张图上，定义4个div，每个div取图的一个角做背景，下面看具体实现方法。
css使用
rch041126的博客
03-05 433
【代码】css使用。
css 前端1
weixin_39349045的博客
08-01 110
css样式 1、怎么样去写样式？ <link> <style> <p style=""> </p> 2、样式如何生效 最近原则，离标签最近的样式生效 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <!-- <style> /
【CSS基础】&符号该怎么用？
Milk~每天分享一点点，技术进步一点点
09-01 4562
&符号 这是less、sass的语法,代表上一级选择器,实际编译成css就是 .el-row:last-child{} & 表示嵌套的上一级，比如你的代码中，& 表示 .el-row 可以看做是嵌套里面的一个变量，值是代表上一级选择器 ...
css &-的使用
weixin_46451295的博客
04-15 1949
.ab{ &-c{} }
css3的标签使用
qq_48516121的博客
11-03 279
一、css： 1.基本选择器 2.高级扩展选择器 3.能够使用常用的css属性 4.能够使用盒子模型的属性去调整网页（万能） 5，完成一个网页的注册。（登入首页） （1）什么是css： 概念：层叠样式表：Cascade Style Sheet （2）作用： 美化网页： 规范 ...
css的3种用法
centre10的专栏
02-17 4772
Css的3中使用方式：方法1：行内样式表（style属性）为HTML应用CSS的一种方法是使用HTML属性style。我们在上例的基础之上，通过行内样式表将页面背景设为红色：例子这个页面是红色的方法2：内部样式表（style元素）为HTML应用CSS的另一种方法是采用HTML元素style。比如像这样：html>例子
如何使用CSS
sinat_36841379的博客
01-23 912
CSS样式是由许多CSS规则组成的文件，规则是最小的CSS单位，规则定义一种或者多种样式的效果。每个规则标识它选择网页中的哪些部分，以及它对页面的该部分应用什么属性。网页链接到该CSS样式，就意味着浏览器需要下载该样式，并且当前显示网页时应用这些CSS样式规则。CSS文件可以与任意数量的网页文档链接，因此，CSS样式可以控制整个站点或它的一部分网页的外观。 而且CSS可以和几种不同的标记语言进行
css元素函数式排列
11-27
CSS元素的函数式排列是指使用CSS的方法来对页面上的元素进行布局和排列。这种排列方式可以使用一些CSS属性和技巧来实现各种不同的布局效果。 其中，flex布局是一种常见的函数式排列方法。通过设置父元素的display属性为flex，就可以使用flex属性对子元素进行排列。通过设置不同的flex属性值，可以实现元素的水平或垂直排列、元素的间距控制、对齐方式调整等。 另外，grid布局也是一种常见的函数式排列方法。通过设置父元素的display属性为grid，可以通过grid-template-columns和grid-template-rows属性来定义网格布局的列和行。通过使用grid-column和grid-row属性，可以对子元素进行放置和对齐。 除此之外，CSS还有一些其他的函数式排列方法，比如使用position属性、使用float属性、使用flexbox属性等，都可以实现不同的排列效果。这些方法可以根据具体的布局需求来选择使用，可以灵活地管理页面上元素的位置和排列。 总之，CSS元素的函数式排列是通过使用一系列CSS属性和技巧来实现对页面元素的布局和排列，可以根据具体的需求选择合适的方法来实现不同的排列效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值