【Java前端】CSS(一)[字体,文本属性,调试工具]_java前端j校验css属性-优快云博客

本文链接：https://blog.youkuaiyun.com/iFinder00159/article/details/118095215

①.CSS简介

HTML的局限性
HTML语义比较单纯,它关注的更多的是语义,让页面能做到正常的显示,很丑

CSS可以进行网页的美化
CSS(Cascading Style Sheets)是层叠样式表的简称,有时也成为CSS样式表或级联样式表
CSS也是一种标记语言,它主要用于设置HTML页面中的文本内容(字体,大小,对其方式等),图片的外形(宽高,边框样式,边距等)以及版面的布局和外观显示的样式
CSS最大的价值:让HTML专注去做结构呈现,样式交给CSS即结构(HTML)与样式(CSS)相分离

CSS语法规则主要由两部分构成:选择器以及一条或多条声明

CSS选择器是用于指定CSS样式的HTML标签,花括号内是该对象的具体形式
属性和属性值以键值对的形式呈现
属性是对指定对象设置的属性,例如字体的大小,文本的颜色等
属性与属性值之间用英文冒号 : 分开
多个键值对用英文分号 ; 进行区分

- CSS代码风格

样式格式书写

紧凑格式
h3 { color: deeppink; font-size: 20px }
展开格式(提倡使用,一行一个属性)
h3 {
color: pink;
font-size: 20px;
}
样式大小写:开发时推荐使用小写来书写目标样式
空格规范
在属性值前,冒号后,保留一个空格color: pink;
在选择器和大括号中间保留一个空格h3 { ... }

②.CSS基础选择器

- 选择器的作用

根据不同的样式需求,将指定的标签选择出来
CSS一般做两件事:

找到对应标签
修改需求属性

- 选择器的分类

基础选择器

基础选择器由单个选择器构成
基础选择器又包括:
标签选择器
类选择器
id选择器
通配符选择器

`标签选择器`

是指用HTML标签的名称作为选择器,将页面中的某一类标签修改为统一的样式
优点:统一修改一类标签的所有样式
缺点:无法选择某一个特定的标签

标签名 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}
<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>标签选择器</title>
    <style>
        /* 标签选择器  标签 { 属性 } */
        p {
            color: rgb(226, 17, 17);
            font-size: 30px;
        }
        
        div {
            color: peru;
            font-size: 40px;
            font-style: italic;
        }
    </style>
</head>

<body>
    <p>男生1</p>
    <p>男生2</p>
    <p>男生3</p>
    <div>女生1</div>
    <div>女生2</div>
    <div>女生3</div>

</body>

`类选择器`

如果想要差异化的修改不同标签的属性,就可以使用类选择器来实现功能
需要结合class属性来进行操作
样式点定义,结构类(class)调用,一个或多个,开发最常用
注意:

类选择器使用 .类名进行标识.后的类名是自己命名的
不能使用html已有标签的名字来定义类名
长名称或词组使用-来为选择器命名,例movie-star
不要使用纯数字/中文为选择器命名
见名知意
CSS&HTML常用标签命名规范

多类名
我们来可以给一个标签指定多个类名,从而达到更多选择的目的.

使用方式:
<div class="red font20">iFinder</div>
在一个class属性中用空格区分不同的属性值
使用场景
可以将公共的属性定义为一个公共的类,然后统一设置公共类的属性,节省代码,方便统一修改

.类名 {
	属性1: 属性值1;
	...
}
<head>
    ...
    <style>
        .red {
            color: red;
        }
        .yellow {
            color: yellow;
        }
        .font20 {
            font-size: 20px;
        }
        .font30 {
            font-size: 30px;
        }
    </style>
</head>

<body>
    <ul>
        <li class="red font20">奇妙能力歌</li>
        <li class="yellow font20">我们的时光</li>
        <li class="red font30">如约而至</li>
        <li class="font30">岁月神偷</li>
    </ul>
</body>

`id选择器`

id选择器通过id属性来修改对应的HTML标签的属性
在CSS中通过 #来定义id选择器
样式**#定义**,结构id调,只能用一次,他人不能用
(相同的id在CSS中不会报错,但是在后台程序通过id找到标签时会报错)

#id名 {
	属性1: 属性值1;
	...
}

<head>
    ...
    <title>id选择器</title>
    <style>
        p {
            font-size: 30px;
        }
        
        #red {
            color: red;
        }
        #pink {
            color: pink;
        }
        #green {
            color: green;
        }
    </style>
</head>

<body>
    <p id="red">周杰伦</p>
    <p id="pink">陈奕迅</p>
    <p id="green">刘德华</p>
</body>

`通配符选择器`

在CSS中 *表示选取页面中所有的元素
通配符选择器不需要在标签内定义,会自动给所有的元素设置样式
特殊情况下使用,如清除所有元素内边距

* {
	属性1: 属性值;
	...
}

基础选择器总结

基础选择器	作用	特点	使用场景	用法
标签选择器	可以选出所有相同的标签	不能差异化选择	较多	`p { color: red; }`
类选择器	可以选出一个或多个标签	根据不同需求选择	非常多	`.nav { font-size: 40px;}`
id选择器	一次只能选择一个标签	一个html中 id 唯一	一般搭配js使用	`#nav { color: green; }`
通配符选择器	选择所有标签	范围极大	特殊情况	`* { margin: 0; }`

③.CSS字体属性

CSS Fonts属性用于定义字体系列，大小，粗细和文字样式

- 字体系列

CSS使用font-family属性定义文本的字体系列
p { font-family: ""微软雅黑"; }
div { font-family: Arial,"Microsoft Yahei","微软雅黑" }

各种不同字体之间必须用英文的逗号隔开
一般由多个词组组成的字体名要加引号
尽量使用系统默认的字体,保证任何用户都能正常显示
常见字体:body { font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB'; }

- 字体大小

CSS中使用font-size属性来定义字体的大小

px(像素)大小是网页的常用单位
Chrome的默认文字大小为16px
不同浏览器的默认大小不同,开发时尽量明确字体大小
可以给body标签指定文字大小

- 字体粗细

CSS使用font-weight属性设置文本字体的粗细

实际开发中提倡使用数字来设置具体的粗细
数字后是没有单位的

属性值	说明
normal	正常的字体,相当于number=400,申明该值会取消之前的设置
bold	粗体,相当于number=700
bolder	IE5+特粗体
lighter	IE5+细体
number	IE5+ 100/200/300/400/500/600/700/800/900 后面没有单位

- 文字样式

CSS使用font-style属性设置文字的样式

属性值	作用
normal	默认值,浏览器会显示标准的样式 `font-style: normal`
italic	显示斜体样式

- 字体的复合属性

字体的符合属性可以把上述文字样式结合起来写,节约代码

使用font属性时必须按类型,粗细,大小/行高,字体的顺序书写,各个属性之间用空格隔开
font: font-style font-weight font-size/line-height font-family
不需要设置的属性可以省略,但是font-size和font-family必须保留

<head>
    ...
    <style>
        div {
            /* font-style: italic;
            font-weight: 700;
            font-size: 20px;
            font-family: 'Microsoft yahei'; */
            /* 复合属性: 简写的方式 节约代码 */
            /* font: font-style font-weight font-size/line-height font-family */
            font: italic 700 20px/20px 'Microsoft yahei'
        }
    </style>
</head>

<body>
    <div>别有幽愁暗恨生,此时无声胜有声</div>
</body>

总结

属性	含义	注意点
font-size	字号	通常单位是px像素
font-family	字体	实际开发中按照团队的约定来写字体
font-weight	字体粗细	加粗是bold或700,不加粗是normal或者400,纯数字,不要单位
font-style	字体样式	倾斜是italic,正常是normal
font	复合属性	属性之间由顺序要求,font-size与font-family不能省略

④.CSS文本属性

CSS Text属性可定义文本的外观,如文本的颜色,对其方式,装饰文本,文本缩进,行间距等等

- 文本颜色

color属性用来定义文本颜色

实际开发中常用十六进制的颜色值

表示形式	属性值
预定义色彩	`red`,`green`,`blue`等
十六进制	`#FF0000`,`#29D794`等
RGB代码	`rgb(255,0,0)`或`rgb(56%,32%,88%)`

- 文本对齐

text-align用于设置文本元素的水平对其方式

属性值	说明
left	左对齐(默认)
right	右对齐
center	居中对其

- 装饰文本

text-decoration属性用来定义装饰文本,可为文字添加下划线,删除线等

属性值	说明
none	默认,没有任何装饰(常用)
underline	下划线,链接`<a>`自带下划线(常用)
overline	上划线(几乎不用)
line-through	删除线(不常用)

- 文本缩进

text-indent属性来指定文本第一行的缩进,通常是将段落的首行缩进

单位:
px可以直接设置首行缩进多少像素
em是针对当前元素的一个字符的大小

- 行间距

line-height属性是用来设置行间距(行高)的

可以通过定义像素值来定义行间距的大小

文本属性总结

属性	含义	注意点
color	文本颜色	常用十六进制颜色
text-align	文本对其	可以设定文本的对其方式
text-indent	文本缩进	通常定义首行缩进两字符`text-indent: 2em;`
text-decoration	装饰文本	添加下划线underline,正常none
line-height	行高	控制行与行之间的距离

⑤.CSS引入方式

按照CSS样式的书写位置(引入方式),可将CSS分为三大类

行内样式表(行内式)
内部样式表(嵌入式)
外部样式表(链接式)

- 内部样式表

又称内嵌样式表,式写到html页面内部的,将所有CSS代码抽取出来放到<style>标签中

通过这种方式,可以方便的控制整个html页面的样式
<style>可以放在HTML文档的任何地方,但是一般会放在<head>标签中
代码结构清晰,但是并没有与结构完全分离

<style>
	div {
		color: red;
	}
</style>

- 行内样式表

又称内联样式表,是在元素标签的内部的style属性中设定CSS的样式,适用于简单的修改格式
<div style="color: red; font-size: 12px;">只要不秃头,恋爱不发愁</div>

style其实就是标签的样式属性
CSS语句写在双引号中间,语法要复合CSS规范
仅可以控制当前标签的样式
书写繁琐,没有与HTML结构相分离,不推荐大量使用

- 外部样式表

实际开发用的都是外部样式表,核心是开发是单独编写CSS文件,之后再把CSS文件引入HTML中
引入样式表分为两步:

新建一个名为.css的文件,把所有的CSS代码都放到文件中
在HTML页面中用<link>标签进行引入
<link rel="stylesheet" href="css文件的路径">
外部样式也称外链式或链接式引入,是开发中最常用的方式

/*css文件,直接写样式,存为.css即可*/
/*style.css*/
div {
	color: pink;
	}

<head>
	...
	<link rel="stylesheet" href="style.css">
</head>

<body>
	<div>需要引入外部链接才能改变样式</div>
</body>

CSS引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便,权重高	结构样式混写	很少	控制单一标签
内部样式表	部分结构样式分离	没有彻底分离	较多	控制一个页面
外部样式表	结构样式完全分离	需要引入	最多	控制多个页面