CSS基础语法(一)
CSS基础语法(一)
一、CSS简介
CSS是层叠样式表的简称,其是一门标记语言
CSS主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图形处理(宽高、边框样式、边距等)以及版面的布局和外观显示样式
1、CSS语法规范
使用HTML时,需要遵从一定的规范,CSS也是如此。想要熟练地使用CSS对网页进行修饰,首先要了解CSS样式规则
选择器 {属性:值}
<!DOCTYPE html>
<html lang="en">
<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 {
color:red;
/* 修改文字的大小为12像素 */
font-size:12px;
}
</style>
</head>
<body>
<p>有点意思</p>
</body>
</html>
选择器是用于指定CSS样式的HTML标签,花括号内是对该对象设置的具体样式
属性和值之间以”键值对“的形式出现
属性时对指定的对象设置的样式属性,例如字体大小(font-size)字体颜色(color)
属性和属性之间用英文“;”分开
CSS一般写在<head>标签里面
2、CSS代码风格
样式格式书写
紧凑格式
h3 {color: deeppink;font-size: 20px;}
展开格式
h3 {
color: pink:
font-size: 20px;
}
强烈推荐第二种,更加直观
样式大小写
- 推荐用小写
空格规范
- 属性值前面,冒号后面,保留一个空格
- 选择器(标签)和大括号中间保留空格
二、CSS基础选择器
选择器(选择符)就是根据不同需求把不同标签选出来。有基础选择器和复合选择器
基础选择器
由单个选择器组成
基础选择器包括:标签选择器、类选择器、id选择器和通配符选择器
1、标签选择器
指用HTML标签名称作为选择器,按标签分类,为页面中某一类标签指定统一的CSS样式
h3 {
color: pink:
font-size: 20px;
}
优点:能快速为页面中同类型的标签统一设置样式
缺点:不能差异化样式,只能选择全部的当前标签
2、类选择器
如果想要差异化选择不同的标签,单独选择一个或某几个标签
<!DOCTYPE html>
<html lang="en">
<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>
/* 类选择器,在要修饰的标签那添加class属性 */
/* 类选择器口诀:样式点定义,结构类调用,一个或多个,开发最常用 */
.red {
color:red;
font-size:12px;
}
</style>
</head>
<body>
<p class="red">有点意思</p> <!--结构需要用class属性来调用-->
<p>hello</p>
</body>
</html>
- 类选择器的使用“.”(英文点号)进行标识,后面紧跟类名(自定义,自己命名)
- 可以理解为给这个标签起名字,来表示
- 长名称或词组可以使用横线来为选择器命名
- 不要使用纯数字、中文等命名,尽量使用英文字母来表示
多类名
使用场景
- 可以把一些标签元素相同的样式(共同的部分)放到一个类里面
- 这些标签都可以调用这个公共的类,然后再调用自己独有的类
- 从而节省CSS代码,统一修改也非常方便
- 多类名选择器在后期布局比较复杂的情况下,较多使用
使用方式:<div class="类型一 类型二"></div>
- 在标签class属性中写多个类名
- 多个类名必须用空格分开
- 这个标签就可以分别具有这些类名的样式
3、id选择器
<!DOCTYPE html>
<html lang="en">
<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>
/* id选择器,#开头,使用方法和HTML中的锚点链接类似 */
/* id选择器的口诀:样式#定义,结构用id调用,只能调用一次 */
#red {
color:red;
font-size:12px;
}
</style>
</head>
<body>
<p id="red">有点意思</p>
<p>hello</p>
</body>
</html>
id选择器和类选择器的区别
- 类选择器可以被多次使用
- id选择器只能使用一次,不得重复
- id选择器和类选择器最大的区别在于使用次数
- 类选择器在修改样式中用的最多,id选择器一般用于唯一性元素上,经常和JavaScript搭配使用
4、通配符选择器
在CSS中,通配符选择器使用"*"定义,它表示选取页面中所有标签
* {
属性1:值1;
···;
}
通配符选择器不需要调用,自动就给所有的元素使用样式
特殊情况下使用,以下是清除所有的元素标签的内外边距
* {
margin: 0;
padding: 0;
}
5、总结
基础选择器 | 作用 | 特点 | 使用情况 | 用法 |
---|---|---|---|---|
标签选择器 | 可以选出所有相同的标签 | 不能差异化选择 | 较多 | p {color: red;} |
类选择器 | 可以选出一个或多个标签 | 可以根据需求选择 | 非常多 | .nav {color: red;} |
id选择器 | 一次只能选择一个标签 | ID属性只能在每个HTML文档中出现一次 | 一般和js搭配 | #nav {color: red;} |
通配符选择器 | 选择所有标签 | 选择的太多,有部分不需要 | 特殊情况使用 | * {color: red;} |
三、CSS字体属性
CSS Fonts(字体)属性用于定义字体系列、大小、粗细和文字样式(如斜体)
字体系列
CSS使用font-family属性定义文本的字体系列
p { /* p标签内的内容字体为微软雅黑 */
font-family:"微软雅黑";
}
各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号
尽量使用系统默认自带字体,保证在任何用户的浏览器中都能正确显示
最常见的几个字体:"Microsoft YaHei", tahoma, arial, "Hiragino Sans GB"
字体大小
CSS使用font-size属性定义字体大小
body {
font-size: 20px;
}
/* 标题标签比较特殊,需要单独指定文字大小 */
h2 {
font-size: 20px;
}
px(像素)大小是我们网页常见的单位
Chrome默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致,我们尽量明确大小,不要默认大小
可以给body指定整个页面文字的大小
字体粗细
CSS使用font-weight属性设置文本字体的粗细
body {
font-weight: normal
}
/* nomal(默认,正常字体,400)、bold(粗体,700)、bolder(特粗体)、lighter(细体)、自定义大小(直接写数字) */
文字样式
CSS使用font-style属性设置文本的风格
p {
font-style: normal
}
/* normal(默认,标准字体样式)、italic(斜体) */
复合属性
简写方式,节约代码
font: font-style font-weight font-size/line-height font-famliy(按照顺序来哦)
p {
font:italic 700 16px "Microsoft YaHei";
}
使用font属性时,必须按照上面的语法格式中的顺序写,不能更换顺序,并且各个属性间以空格空开
不需要设置的属性可以省略(取默认值),但必须保留font-size和font-family属性,否则font属性将不起作用
总结
属性 | 表示 | 注意点 |
---|---|---|
font-size | 字号 | 我们通常的单位是px像素,一定要跟上单位 |
font-family | 字体 | 实际工作按照团队约定来写字体 |
font-weight | 字体粗细 | 加粗是700或者bold、不加粗是400或者normal,数字不要跟单位 |
font-style | 字体样式 | 斜体是italic、不倾斜是normal工作中我们常用normal |
font | 字体连写 | 1.字体连写是有顺序的,不能随便换位置2.其中字号和字体必须同时出现 |
四、文本属性
CSS Text(文本)属性可以定义文本的外观,比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。
1、文本颜色
color属性表示颜色
p {
color: red
}
表示方法 | 属性值 |
---|---|
预定义的颜色值 | red, green, blue, pink等 |
十六进制 | #FF0000, #FF6600 |
RGB代码 | rgb(255, 0, 0)或(100%, 0%, 0%) |
2、对齐文本
text-align属性用于设置元素内文本内容的水平对齐方式
div {
text-align: center; /* 居中对齐 */
}
3、装饰文本
text-decoration属性规定添加到文本的装饰。可以给文本添加下划线(underline)、删除线(line-through)、上划线(overline)等,默认的是没有装饰线(none)
div {
text-decoration: underline;
}
4、文本缩进
text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进
p {
text-indent: 20px; /* 缩进20像素,如果是2em,则是缩进2个元素 */
}
em是一个相对单位,就是当前元素(font-size)1个文字的大小,如果单前元素没有设置大小,则会安照父元素的一个文字大小
5、行间距
line-height属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离
p {
line-height: 16px;
}
总结
属性 | 表示 | 注意点 |
---|---|---|
color | 文本颜色 | 我们通常使用十六进制表示颜色 |
text-align | 文本对齐 | 可以设定文字水平的方式 |
text-indent | 文本缩进 | 通常我们用于段落首行缩进两个字符text-indent: 2em; |
line-height | 行高 | 控制行与行之间的距离 |
五、CSS的引入方式
1、内部样式表
内部样式表(内嵌样式表)是写到html页面的内部,是将所有的CSS代码抽取出来,单独放到一个<style>标签中
<style>
p {
color: red;
font-size: 20px
}
</style>
<style>标签理论上可以放到HTML文档的任何位置,但一般放在文档的<head>标签中
通过这种方式,可以方便控制当前整个页面中的元素样式设置
代码结构清晰,但是并没有实现结构与样式的完全分离
2、行内样式表
行内样式表(内嵌样式表)是在元素标签内部的style属性中设定CSS样式。适合修改简单样式
<div style="color: red; font-size: 20px">hello world</div>
style其实就是标签的属性
在双引号中间,写法符合CSS规范
可以控制当前页面的标签设置样式
由于书写繁琐,并且没有体现出结构与样式的分离的思想,所以不推荐使用,只有对当前元素添加简单样式的时候,可以考虑使用
3、外部样式表
实际开发都是外部样式表,适合于样式比较多的情况。核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用
引入外部样式表步骤:
新建一个后缀名为.css的样式文件,把所有CSS代码都放入此文件中
<link rel="stylesheet" href="filename.css">
<!DOCTYPE html>
<html lang="en">
<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 rel="stylesheet" href="css.css">
</head>
<body>
<p id="red">有点意思</p>
<p>hello</p>
</body>
</html>
总结
样式表 | 优点 | 缺点 | 使用情况 | 控制范围 |
---|---|---|---|---|
行内样式表 | 书写方便,权重高 | 结构样式混写 | 较少 | 控制一个标签 |
内部样式表 | 部分结构和样式相分离 | 没有彻底分离 | 较多 | 控制一个页面 |
外部样式表 | 完全实现和样式分离 | 需要引入 | 最多 | 控制多个页面 |
六、Chrome调试工具
Chrome浏览器提供了一个非常好用的调试工具,可以用来调试我们的HTML结构和CSS样式
使用调试工具
- Ctrl + 滚轮:可以放大开发者工具的代码大小
- 左边是HTML元素结构。右边是CSS样式
- 右边CSS样式可以改变数值(左右箭头或者直接输入)和查看颜色
- Ctrl + 0:复原浏览器大小
- 如果点击元素,发现右侧没有样式引入,极有可能是类名或者样式引入错误
- 如果有样式,但是样式前面有黄色叹号提示,则是样式属性书写错误
七、Emmet语法
Emmet语法的前身是Zen coding,它使用缩写来提高html/css的编写速度,Vscode内部已集成该语法
1、快速生成HTML结构语法
生成标签,直接输入标签名按tab键即可。比如:div 然后tab键,就可以生成<div></div>
如果想要生成多个相同标签,加上*就可以了。比如:div*3 就可以生成3个div
<!-- div*3 -->
<div></div>
<div></div>
<div></div>
如果有父子级关系的标签,可以用>。比如:ul>li 即可
<!-- ul>li -->
<ul>
<li></li>
</ul>
如果有兄弟关系的标签,用 + 就可以了。比如:div+p
<!-- div+p -->
<div></div>
<p></p>
如果生成带有类名或者id名字的,直接编写.demo 或者 #two tab键就可以了
<!-- .demo -->
<div class="demo"></div>
<!-- #demo -->
<div id="demo"></div>
如果生成的div类名是有顺序的,可以用自增符号 $ 。比如:.demo$*5
<!-- .demo$*5 -->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
如果想要在生成的标签内部写内容可以用{}表示。比如:div{hello}——》<div>hello</div>
<!-- div{hello$}*5 -->
<div>hello1</div>
<div>hello2</div>
<div>hello3</div>
<div>hello4</div>
<div>hello5</div>
2、快速生成CSS样式语法
CSS基本采取简写形式即可
- 比如:w200 按tab 可以生成 width: 200px;
- 比如:lh26 按tab 可以生成 line-height: 26px;
3.、快速格式化代码
Vscode 快速格式化代码:Shift + alt + F
CSS基础语法(一)的更多相关文章
- CSS基础语法与选择器
CSS基础 语法 : <head> <style type="text/css"> 选择器(即修饰对象){ 修饰属性:属性值; 修饰属性:属性值; } &l ...
- css基础-语法篇
CSS基础 1.css简介 cascading style sheets 汉译层叠样式表,WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息 ...
- html标签和css基础语法与浏览器兼容性等相关基础学习
<!-- table的使用 --> <h3>前端日常</h3> <form action="https://www.baidu.com"& ...
- (二)CSS基础语法
CSS语法规则由两个主要的部分构成:选择器,以及一条或者多条声明. 下面的示意图为您展示了CSS语法结构: 例如: h1{color:red;font-size:14px;} 值得不同写法和单位 其中 ...
- CSS从零开始(1)--CSS基础语法
1.CSS语法 CSS规则有两个主要部分构成:选择器,以及一条或多条说明. 例如:selector{declaration1;declaration2;declaration3;......;} 注: ...
- HTML 网页开发、CSS 基础语法——十二.CSS选择器
选择器 基础选择器:标签选择器,id选择器,类选择器,通配符选择器 高级选择器:后代选择器,交集选择器,并集选择器 1. 标签选择器: • 优点:可以选中所有的同名标签,设置所有同名标签的公共样式. ...
- HTML 网页开发、CSS 基础语法——八.HTML基本语法
表格制作 1.表格基础 创建一个简单的表格至少有三个标签组成,分别是<table>,<tr>,<td>标签. table:表格,定义的是整个的表格大结构. tr:t ...
- HTML 网页开发、CSS 基础语法——三. HTML概念
1.纯文本格式 纯文本格式,就是没有任何文本修饰的,没有任何粗体,下划线,斜体,图形,符号,或者特殊字符,及特殊打印格式的文本,只保存文本,不保存其格式设置. ①格式对比 纯文本格式 富文本格式 最常 ...
- CSS 基础语法
注:CSS对大小写不敏感,但是如果涉及到与HTML文档一起工作的时候,class和id名称对大小写是敏感的 一.color color:#ff0000; color:#f00; //缩写 color: ...
随机推荐
- JAVA笔记2__类/封闭性/构造方法/方法的重载/匿名对象
public class Main { public static void main(String[] args) { Chicken c1 = new Chicken(); Chicken c2 ...
- hdu 5101 Select (二分+单调)
题意: 多多有一个智商值K. 有n个班级,第i个班级有mi个人.智商分别是v1,v2,.....vm. 多多要从这些人中选出两人.要求两人智商和大于K,并且两人不同班.问总共有多少种方案. 数据范围: ...
- 一、spring 环境搭建
一.springtoolSuite4下载 1.概述 Spring Tools 4 是适用于您最喜欢的编码环境的下一代 Spring 工具.它主要从头开始重建,为开发基于 Spring 的企业应用程序提 ...
- linux 安装docker(一)
1.安装环境 此处在Centos7进行安装,可以使用以下命令查看CentOS版本 lsb_release -a 在 CentOS 7安装docker要求系统为64位.系统内核版本为 3.10 以上,可 ...
- 【java+selenium3】Actions模拟鼠标 (十一)
一.鼠标操作 WebElement的click()方法可实现元素的点击操作,但是没有提供鼠标的右击/双击/悬停/鼠标拖动等操作.这些操作需要通过Action类提供的方法来实现! Action常用的ap ...
- webpack 打包html文件
webpack 打包html文件 webpack.config.js配置文件内容为: /** * loader: 1. 下载 2. 使用(配置) * plugins:1. 下载 2. 引入 3.使用 ...
- 蓝图before request
方法1 @bp.before_request def test(): print("test") 方法2 def bp_before_request(): print(test) ...
- gorm框架表名自动加s问题
查看日志会发现表名自动加了s 在model实现以下方法即可解决 type UsUser struct { ID int64 `gorm:"column:id" db:"c ...
- 面试官:咱们来聊一聊mysql主从延迟
背景 前段时间遇到一个线上问题,后来排查好久发现是因为主从同步延迟导致的,所以今天写一篇文章总结一下这个问题希望对你有用.如果觉得还不错,记得加个关注点个赞哦 思维导图 思维导图 常见的主从架构 随着 ...
- Centos上安装MongoDB4.X
一.下载并解压MongoDB 1.下载MongoDB 取件码w2px 2.通过ftp软件上传的服务器上,我的位置:/root/softwares 3.解压并放在opt文件夹下:tar zxvf mon ...