【JavaEE】CSS基础知识

这篇具有很好参考价值的文章主要介绍了【JavaEE】CSS基础知识。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.CSS概念

1.1CSS是干啥的?

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离;简单的说就是,没用CSS之前就相当于原照片,使用CSS之后,照片就相当于被p了,被美颜了。

1.2基础语法规范

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改 (找谁)

  • 声明决定修改啥. (干啥)

  • 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.!【JavaEE】CSS基础知识

1.2基础语法规范

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改(对谁进行操作)
  • 声明决定修改啥.(操作谁的什么)
  • 声明的属性是键值对. 使用 ; 区分键值对, 使用 : 区分键和值.
<style>
p {
	/* 设置字体颜色 */
	color: red;
	/* 设置字体大小 */
	font-size: 30px;
}
</style>
<p>hello</p>         

注意:

  • CSS要写在style标签当中。
  • CSS中使用/* */进行注释,也可以使用CTRL+/进行快速注释。

1.3引入格式

✨内部样式表

写在 style 标签中. 嵌入到 html 内部.理论上来说 style 放到 html 的哪里都行. 但是一般都是放到 head 标签中。
优点:能够让样式和页面结构分离,降低耦合度,利于以后的维护。
缺点:分离的还不够彻底. 尤其是CSS 内容多的时候。

✨行内样式表

通过 style 属性, 来指定某个标签的样式.只适合于写简单样式. 只针对某个标签生效.
缺点: 不能写太复杂的样式.
这种写法优先级较高, 会覆盖其他的样式。

✨外部样式(最常用的样式)

  1. 创建一个CSS文件
  2. 将CSS文件通过link标签导入到HTML文件中
<link rel="stylesheet" href="[CSS文件路径]">

优点: 样式和结构彻底分离了,有利于日后的维护,降低日后维护成本。
缺点: 受到浏览器缓存影响, 修改之后 不一定 立刻生效。

1.4代码风格

✨样式格式

  1. 紧凑型
{ color: red; font-size: 30px;}
  1. 展开风格(推荐)
p {
	color: red;
	font-size: 30px;
}

✨样式大小写

CSS不用区分大小写,在开发过程中推荐小写

2.选择器

2.1选择器的功能

选中页面中的指定的元素,这样我们才能确定我们接下来的操作是对于谁实现的,就好比我们在打原神时,我们打怪时开大招,就需要确定是谁开大招去打谁。

2.2基础选择器有哪些?

🛠️标签选择器

方式:

标签名 {
 	样式声明
 }

特点:

  • 能快速为同一类型的标签都选择出来。
  • 不能差异化选择
<style>
	p {
		color: red;
	}
	div {
		color: green;
	}
	</style>
		<p>神里凌华</p>
		<p>神里凌华</p>
		<div>枫原万叶</div>
		<div>枫原万叶</div>

代码效果:
【JavaEE】CSS基础知识

🛠️类选择器

方式:

.类名 {
 	样式声明
 }

特点:

  • 差异化表示不同的标签
  • 通过类的继承让同一个效果应用在不同的标签
<style>
        .red {
            color: red;
        }
        .blue {
            color: blue;
        }
        </style>
            <p class="red">神里凌华</p>
            <p>神里凌华</p>
            <div class="blue">枫原万叶</div>
            <div>枫原万叶</div>

代码效果:
【JavaEE】CSS基础知识

🛠️id 选择器

方式:

#id {
 	样式声明
 }

特点:

  • CSS 中使用 # 开头表示 id 选择器
  • id 选择器的值和 html 中某个元素的 id 值相同
  • html 的元素 id 不必带 #
  • id 是唯一的, 不能被多个标签使用 (是和 类选择器 最大的区别),类选择器相当于姓名,id选择器相当于身份证。
<style>
        #li {
            color: brown;
        }
        #yuan {
            color: orange;
        }
        </style>
            <p id="li">神里凌华</p>
            <p>神里凌华</p>
            <div id="yuan">枫原万叶</div>
            <div>枫原万叶</div>

【JavaEE】CSS基础知识

🛠️通配符选择器

使用 * 的定义, 选取所有的标签.

<style>
        * {
            color: red;
        }
        </style>
            <p >神里凌华</p>
            <p>神里凌华</p>
            <div >枫原万叶</div>
            <div>枫原万叶</div>

代码效果:
【JavaEE】CSS基础知识

基础选择器小结

作用 特点
标签选择器 能选出所有相同标签 不能差异化选择
类选择器 能选出一个或多个标签 根据需求选择, 最灵活, 最常用
id 选择器 能选出一个标签 同一个 id 在一个 HTML 中只能出现一次
通配符选择器 选择所有标签 特殊情况下使用

2.3复合选择器有哪些?

🛠️后代选择器

后代选择器又叫包含选择器. 选择某个父元素中的某个子元素.
方式:

元素1 元素2 {
 	样式声明
 }

特点:

  • 元素 1 和 元素 2 要使用空格分割
  • 元素 1 是父级, 元素 2 是子级, 只选元素 2 , 不影响元素 1
div p {
            color: red;
        }
        </style>
            
            <div >
                你好
                <p>还行吧</p>
            </div>

代码效果:只对div标签中的p里的内容有作用
【JavaEE】CSS基础知识

🛠️子选择器

方式(只选亲儿子, 不选孙子元素):

元素1>元素2 { 
	样式声明
 }

🛠️并集选择器

方式:

元素1,元素2 {
 	样式声明
 }

特点:

  • 通过 逗号 分割等多个元素
  • 表示同时选中元素 1 和 元素 2
  • 任何基础选择器都可以使用并集选择器.
  • 并集选择器建议竖着写. 每个选择器占一行. (最后一个选择器不能加逗号)
<style>
       div,p {
           color: red;
       }
       </style>
           
           <p>神里凌华</p>
           <p>神里凌华</p>
           <div>枫原万叶</div>
           <div>枫原万叶</div>

代码效果:
【JavaEE】CSS基础知识

🛠️伪类选择器

  1. 链接伪类选择器
a:link 选择未被访问过的链接
a:visited 选择已经被访问过的链接
a:hover 选择鼠标指针悬停上的链接
a:active 选择活动链接(鼠标按下了但是未弹起)
<style>
        /* 选择未被访问过的链接 */
        a:link {
        color: black;
            /* 去掉 a 标签的下划线 */
            text-decoration: none;
            
        } 
        /* 选择已经被访问过的链接 */
        a:visited {
            color: green;
        }
        /* 选择鼠标指针悬停上的链接 */
        a:hover {
            color: red;
        } 
        /* 选择活动链接(鼠标按下了但是未弹起) */
        a:active {
            color: blue;
        }
        </style>
            
            <a href="#">点击打开学习资料</a>

代码效果:观察点击前;点击中;点击后的效果。
【JavaEE】CSS基础知识

复合选择器小结

选择器 作用 注意事项
后代选择器 选择后代元素 可以是孙子元素
子选择器 选择子元素 只能选亲儿子, 不能选孙子
并集选择器 选择相同样式的元素 更好的做到代码重用
链接伪类选择器 选择不同状态的链接 重点掌握 a:hover 的写法
:focuse 伪类选择器 选择被选中的元素 input:focus

3.常用元素属性

3.1字体属性

✨设置字体
方式:

选择器 {
	font-family: ;
}
  • 字体名称可以用中文, 但是不建议。
  • 多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )
  • 如果字体名有空格, 使用引号包裹.
  • 建议使用常见字体, 否则兼容性不好.
<style>
        div {
            font-family: 'Microsoft YaHei';
        }
        span {
            font-family: '宋体';
        }
        </style>
        
        <div>你好,世界</div>
        <span>你好,Java</div>

代码效果:
【JavaEE】CSS基础知识

✨字体大小
方式:

选择器 {
	font-size: ;
}
  • size的单位通常使用px,px是像素含义。
<style>
        div {
            font-family: 'Microsoft YaHei';
            font-size: 50px;
        }
        span {
            font-family: '宋体';
            font-size: 30px;
        }
        </style>
        
        <div>你好,世界</div>
        <span>你好,Java</div>

代码效果:
【JavaEE】CSS基础知识
✨字体粗细
方式:

选择器 {
	font-weight: ;
}
  • 可以使用数字表示粗细
  • 也可以使用bold表示
<style>
       div {
           font-weight: bold;
           
       }
       span {
           font-weight: 100;
       }
       </style>
       
       <div>你好,世界</div>
       <span>你好,Java</div>

代码效果:
【JavaEE】CSS基础知识
✨文字样式
方式:

选择器 {
	font-style: ;
}
  • 一般我们都是将文字从倾斜改为不倾斜,很少从不倾斜改为倾斜
<style>
       div {
           /* 不倾斜 */
           font-style:normal;
           
       }
       span {
           /* 倾斜 */
           font-style: italic;
       }
       </style>
       
       <div>你好,世界</div>
       <span>你好,Java</div>

代码效果:
【JavaEE】CSS基础知识

3.2文本属性

✨文本颜色
方式:

选择器 {
	color: ;
}
  • 这里的参数可以是十六进制的数
  • 可以是一个函数rgb(),它里面有三个参数可以认为是R,G,B; R (red), G (green), B (blue) 的方式表示颜色(色光三原色). 三种颜色按照不同的比例搭配, 就能混合出各种五彩斑斓的效果.计算机中针对 R, G, B 三个分量, 分别使用一个字节表示(8个比特位, 表示的范围是 0-255, 十六进制表示为 00-FF).
  • 预定义的颜色值(直接是单词)
<style>
       div {
           color: #ff0;
           
       }
       span {
           color: rgb(25, 33, 50);
       }
       p {
           color: red;
       }
       </style>
       
       <div>你好,世界</div>
       <span>你好,Java</span>
       <p>你好,看这篇文章的帅哥靓女</p>

代码效果:
【JavaEE】CSS基础知识
✨文本对齐
方式:

选择器 {
	text-align: ;
}
  • 它当中有三个参数分别是left(左对齐),center(居中对其),right(右对齐)。
<style>
            .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>

代码效果:
【JavaEE】CSS基础知识

✨文本装饰
方式:

选择器 {
	color: ;
}

常见的取值:

underline 下划线. [常用]
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线. [不常用]
line-through 删除线 [不常用]
div {
           text-decoration: underline;
           
       }
       span {
           text-decoration: line-through;
       }
       p {
           text-decoration: overline;
       }
       </style>
       
       <div>你好,世界</div>
       <span>你好,Java</span>
       <p>你好,看这篇文章的帅哥靓女</p>

代码效果:
【JavaEE】CSS基础知识

✨文本缩进
只对第一行生效
方式:

选择器 {
	text-indent: [值];
}
  • 单位可以使用px或者 em
  • 使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小
  • 缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)
<style>
       div {
           text-indent: 2em;
       }

       p {
           text-indent: 0em;
       }
       </style>
       
       <div>你好,世界 你好,Java</div>

       <p>你好,看这篇文章的帅哥靓女</p>

代码效果:
【JavaEE】CSS基础知识

3.3背景属性

✨背景颜色
方式:

选择器 {
	background-color: 
}
  • 背景颜色的格式和文本颜色的格式相似,这里不再赘述了。

✨背景照片
方式:

选择器 {
	 background-image: url();
}
  • url中填写绝对路径和相对路径都可以
  • url可以加引号,也可以不加引号

✨背景平铺
方式:

选择器 {
	background-repeat: ;
}

参数如下:

  • repeat: 平铺
  • no-repeat: 不平铺
  • repeat-x: 水平平铺
  • repeat-y: 垂直平铺
  • 在不设置背景平铺的参数时,整个屏幕都会铺满

✨背景位置
方式:

选择器 {
	background-position: x y;
}

三种风格:

  1. 方位名词: (top, left, right, bottom)
  2. 精确单位: 坐标或者百分比(以左上角为原点)
  3. 混合单位: 同时包含方位名词和精确单位

注意

当给出的是方位名词是只有一个时,没给的哪一个就默认居中,在给出的时精确的数字时也是如此。

我们可以将这个页面想象成是一个坐标轴我们给出的参数都是相对于坐标轴来进行使用得到。
【JavaEE】CSS基础知识
✨背景尺寸
方式:

选择器 {
	background-size: ;
}

可用参数如下:

  • 可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
  • 也可以填百分比: 按照父元素的尺寸设置.
  • cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
  • contain: 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域.

写在最后:

🐣🐣🐣以上就是本文全部内容,如果对你有所帮助,希望能留下你的点赞+关注,我会更加努力的更新内容!非常感谢🧡🧡🧡

若本篇文章有错误的地方,欢迎大佬们指正!文章来源地址https://www.toymoban.com/news/detail-432922.html

到了这里,关于【JavaEE】CSS基础知识的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【JavaEE基础学习打卡00】该专栏知识大纲在这里!

    📜 本系列教程适用于 Java Web 初学者、爱好者,小白白。我们的天赋并不高,可贵在努力,坚持不放弃。坚信量最终引发质变,厚积薄发。 🚀 文中白话居多,尽量以小白视角呈现,帮助大家快速入门。 🎅 我是 蜗牛老师 ,之前网名是 Ongoing蜗牛 ,人如其名,干啥都慢,所

    2024年02月10日
    浏览(33)
  • Tomcat和Servlet基础知识的讲解(JavaEE初阶系列16)

    目录 前言: 1.Tomcat 1.1Tomcat是什么 1.2下载安装 2.Servlet 2.1什么是Servlet 2.2使用Servlet来编写一个“hello world” 1.2.1创建项目(Maven) 1.2.2引入依赖(Servlet) 1.2.3创建目录(webapp) 1.2.4编写代码(HelloServlet) 1.2.5打包(war) 1.2.6部署(拷贝war到webapps目录中) 1.2.7验证(浏览器发一

    2024年02月11日
    浏览(44)
  • 【CSS】CSS文本样式【CSS基础知识详解】

    👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 本文章收录于专栏 【CSS】 【CSS专栏】 已发布文章 📁【CSS基础认知】 📁【CSS选择器全解指南】 📁【CSS字体样式】 属性名: color 作用:设置文本的颜色 属性值: 颜色表示方式 表示含

    2024年01月21日
    浏览(47)
  • 【CSS】CSS字体样式【CSS基础知识详解】

    👨‍💻个人主页:@花无缺 欢迎 点赞👍 收藏⭐ 留言📝 加关注✅! 本文由 花无缺 原创 本文章收录于专栏 【CSS】 【CSS专栏】 已发布文章 📁【CSS基础认知】 📁【CSS选择器全解指南】 文字是网页界面上最常见的元素,而文字的字体、大小和文字样式等都可以通过CSS来设置

    2024年02月05日
    浏览(73)
  • css 基础知识

    CSS(层叠样式表)是用于描述网页中元素样式和布局的一种标记语言。以下是一些CSS的基础知识: 选择器:选择器用于选择HTML文档中的元素,并为其应用样式。常见的选择器有标签选择器、类选择器和ID选择器。 标签选择器:使用HTML标签名作为选择器,可以选择所有匹配该

    2024年02月10日
    浏览(68)
  • CSS基础知识,必须掌握!!!

    CSS背景属性用于定义HTML元素的背景 CSS属性定义背景效果: background-color - 定义背景颜色 background-image - 定义背景图片 background-repeat - 是否平铺,水平平铺(repeat-x)、垂直平铺(repeat-y)、不平铺(no-repeat) background-attachment - 是否固定背景图片,不随滚动而发生位置改变 bac

    2023年04月09日
    浏览(60)
  • CSS的基础知识讲解

    一般来说我们CSS就是我们对浏览器的第二个操作,就是给网页穿衣服.让网页变得更好看. 在CSS中,选择器用于选择HTML文档中的元素,从而将样式应用于这些元素。选择器通常基于元素的标签名、类名、ID、属性值或父子关系等特征来进行匹配。 标签选择器:选择某个 HTML 标签

    2024年02月05日
    浏览(44)
  • CSS——基础知识及使用

    CSS是层叠样式表 (Cascading Style Sheets)的简写. CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。 选择器 + { 一条/N条声明 } 选择器决定针对谁修改 (找谁) 声明决定修改啥. (干啥) 声明的属性是键值对. (使用 ; 区分键值对

    2024年02月16日
    浏览(40)
  • 关于CSS的基础知识

    CSS的基本介绍 css(Cascading style sheets):层叠样式表 作用:给页面中的html标签设置样式 css标签写在style标签中,style标签一般写在head标签里面,title标签下面 css常见引入方式 title引入方式一(内嵌式)/title 内嵌式:css写在style里,作用在当前页面(小案例) 外联式:css写在

    2024年01月19日
    浏览(52)
  • CSS基础知识点

    目录 ​编辑一、基本语法规范 二、CSS 选择器 1、简单选择器  (1)标签选择器 (2)类选择器 (3)ID 选择器 2、复合选择器 (1)后代选择器 (2)子选择器 (3)并集选择器 三、CSS常用属性值 1、设置字体家族 2、设置字体大小 3、设置字体的粗细 4、文字倾斜设置 5、文字

    2024年02月11日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包