HTML/CSS 第三章

学习目标

  1. css的作用和基本语法
  2. css控制字体
  3. 基本选择器
  4. 伪类选择器
  5. 行高和对齐方式
  6. css其他属性
  7. 首行缩进、字体下划线等

css的概念及其作用

css全称为(Cascading Style Sheets)翻译过来就是层叠样式表 作用:主要作用就是设置网页的文字(大小,颜色,字体,对齐等等)图片和板式布局等等 说的简单点了就是给页面化妆的

基本语法:

选择器 {
属性1: 值1;
属性2: 值2;
属性3: 值3;
}

注意:符号必须是英文状态下的

字体属性

设置字体的大小

font-size  设置字体的大小
取值:font-size: 12px;
注意:在css大多数数值都需要添加单位

设置字体的粗细

font-weight 设置字体的粗细
取值:normal 、bold、 100 - 900

多说一嘴:用数字设置的时候,只有400和700会产生变化,是因为字体在初始设计的时候就没有设置太多的粗细标准,一般就是两种,默认的和加粗的 所以 在实际工作中 用的最多的就是normal(400) bold(700)

设置字体的风格

font-style 设置字体的风格(样式)
取值:
	normal 默认 显示标准的字体样式
	italic 字体倾斜

设置不同类型的字体

font-family 设置不同的字体
取值:宋体、微软雅黑、黑体、。。。等等

多说一嘴:

  1. 不推荐使用一些冷门字体,因为一些冷门字体很多电脑里面默认没有安装,这个时候就会显示不出来。所以实际工作中,默认都是一些主流字体 如宋体 微软雅黑 等。。。
  2. 字体可以写多组,中间用逗号隔开
  3. 字体名称中如果有空格 # $ 这种特殊字符的时候需要添加上引号 中文字体也需要添加引号 了解:http://code.ciaoca.com/style/cssfont2unicode/

font简写

font: font-style  font-weight  font-size/line-height  font-family;

不建议修改顺序  并且不需要设置的属性可以不写  但是font-size和font-family必须指定,否则将不起作用

开发者工具 (重点)

开发者工具对于开发者来说特别重要,只要你开发你就离不开它。一定要学会使用 作用:调试代码 检测代码的!!

打开开发者工具:f12 或者在页面上直接右键选择 “检查”

在基础班我们只需要关注elements这个面板 右侧的style就是当前标签对应的css样式 我们可以通过这个来检查代码错误和调试代码!!

选择器

想要操作任何一个标签,那么首先需要做的事情就是选中对应的标签,而这个就是选择器的作用

基础选择器

标签选择器

标签名 {属性1: 值1;属性2: 值2;}

特点:会将页面上所有符合的标签都选择上,但是不能实现差异化选择

类选择器

声明自定义类名 .自定义类名 {属性1:值1;属性2: 值2;} (声明类名选择器)

给对应的元素添加class类名属性 class="自定义的类名" (调用类名选择器)

如:.box {
		font-size:12px;
	}
<div class="box">内容</div>

特点:可以给相同标签的元素定义不同的样式 在实际工作中用的最多

多类名选择器

思考:需求:两个相同的标签,有一些共同的css样式 但是也有一些差异化的css样式

.red {
	color: red;
}
.ft12 {
	font-size: 12px;
}
.ft14 {
	font-size: 14px;
}

<div class="red ft12">内容</div>
<div class="red ft14">内容</div>

一个元素可以拥有多个类名 类名和类名之间用空格隔开 多类名选择器可以让我们解决更复杂的一些需求

id选择器

id选择器的使用方式和类选择器基本一致

  1. 声明id #自定义id名字 {属性1:值1;属性2:值2;}
  2. 调用id 给对应的元素添加属性 id="自定义id"
#box {
font-size:12px;
}

<div id="box">内容</div>

特点:id选择器一般配合后期的JS使用较多,效果和类选择器一样,只不过是类选择器可以被多个元素调用,但是id选择器只能被一个元素调用 在同一个页面中吗,不能出现两个id值相同的元素

通配符选择器

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

特点:选中任何元素,后期用于页面初始化。

伪类选择器

伪类选择器可以理解为选择的元素的一种状态,并不是如之前直接选中元素就完事了

a:link   没有被访问的时候的状态
a:visited  访问之后的状态
a:hover		鼠标移动上去之后的状态
a:active	鼠标按下的状态

伪类选择器在实际工作中,不会写这么多,意义不大,推荐简写的方式完成

a {}
a:hover {}

文字的对齐 缩进 下划线

水平对齐

text-align:值;
取值:left right center
该属性控制的是标签  “内部的文字”  水平居中

首行缩进

text-indent:值;
取值可以是像素,也可以是em  推荐写法:text-indent:2em;

字体下划线和删除线

text-decoration:值;
取值:underline 下划线  line-through 删除线 none 去掉多余的样式

行高

行高控制的是文字与文字之间的上下距离 (行距)

line-height:值;
  1. 值的取值是像素
  2. **小技巧:如果将标签的高度和行高设置成一样,那么这个标签里面的文字可以在这个标签里面垂直居中
  3. 两者结合使用可以让单行文字在标签内部水平垂直居中

其他细节属性

  1. 颜色属性 颜色属性的取值可以是 十六进制,rgb(), rgba()
  2. css的注释 /* 注释内容 */

本文分享自微信公众号 - web前端基地(webjidi)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-07-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏大前端666

VUE实战—商品展示切图(7)

上次我们通过设计评价组件这个过程,了解到了组件设计中的良好的习惯,比如,文件夹如何支撑组件,图片,组件路径的存放于设置。

11400
来自专栏前端入门学习

如何从请求、传输、渲染3个方面提升Web前端性能

什么是WEB前端呢?就是用户电脑的浏览器所做的一切事情。我们来看看用户访问网站,浏览器都做了哪些事情:

10510
来自专栏ytkah

wordpress默认css样式class和id集合

  你是否想过如何设计WordPress主题的不同元素?每个主题都不一样,但是有一些CSS的class和id是由WordPress生成的。我们将逐一介绍一些最重...

10540
来自专栏网络技术联盟站

网络工程师进阶 | VPN的配置脚本和注意事项-MPLS VPN、DMVPN、IPSec VPN、基于GRE的IPSec(思科)

①先保证LDP的transport-address可达(即保证MPLS域的通信,启用一个路由协议)

37830
来自专栏前端自习课

【CSS】205-CSS的“层”峦“叠”翠

提起,z-index大家脑海里可能会立刻浮现这样的知识点:“z-index的值大小控制元素在Z轴上显示的层级,z-index越大显示的层级越高(也就是在最上层,...

8120
来自专栏python爱好部落

从0开始做系统之前端

做前端,我们一般要掌握三方面的知识:html,CSS 和javascript。 html负责搭建基础,就像人类的骨架。 CSS负责布局和美化,就像人类的肌肉和皮...

11720
来自专栏前端词典

【前端词典】关于 Babel 你必须知道的

我第一次打开搜索引擎查询关于 Babel 的资料时,出现的竟然是关于 Babel 的传说。后来我花了小一天的时间去了解这个传说(来自《旧约圣经》)。

10120
来自专栏前端自习课

【React】196-React中使用CSS的7种方式(应该是最全的)

引入react内部已经支持了后缀为scss的文件,所以只需要安装node-sass即可,因为有个node-sass,scss文件才能在node环境上编译成css...

13220
来自专栏前端自习课

【CSS】202-23个CSS垂直居中技巧汇总

自古以来(是有多?~),网页CSS的垂直居中需求始终没有停过,而其困难度也始终没有让人轻松过,经过了每位开发先烈的研究后,据说CSS的垂直居中技巧已达到近十种之...

9920
来自专栏Flutter笔记

Flutter 数据监听Widget

给定ValueListenable 一个泛型和一个构建器,它从泛型的具体值构建小部件,这个类将自动注册为ValueListenable 的侦听器,并在值更改时用...

27230

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励