HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片
一、超链接
二、CSS选择器
CSS
的全称叫做: Cascading Style Sheets
级联样式表的缩写。
2.1 类型选择器
2.2 派生选择器
2.3 伪类选择器
<style >
a{
text-decoration: none;
color: black;
}
/*注意它们是有先后顺序的,否则不起效果!!!*/
/*未访问的链接,和a{}相同并且同时存在时会覆盖a{}*/
a:link{
color:darkblue;
}
/*鼠标移动到超链接上时*/
a:hover{
text-decoration: underline;
color: darkred;
}
/*被选定的超链接*/
a:active{
text-decoration: underline;
color: yellow;
}
/*已访问的超链接*/
a:visited{
color: lightblue;
}
</style>
2.4 类选择器
2.5 link标签
是一个空标签,因此只需要写属性即可
2.6
三、CSS颜色
四、CSS盒模式
块级标签: Block-level Tags
内联标签:Inline-level Tags
块标签之间的距离:
4.2 盒模式
如果都一样:margin: 6px
计算盒子的尺寸:
总结:
五、DIV布局
5.2 内容居中
text-align: center
或
- 固定宽度:
width: 500px; margin: 30px auto 0 auto
六、图片
图片是如何加载的:
6.1 内容图片
在Google
浏览器中需要为图片定义高度和宽带才能在图片没有加载成功的时候显示alt
描述文字。
6.2 布局图片
简写的形式比分开写的性能更高,能简写尽量简写。
6.3 用户交互图片
a
标签是内联标签,不能设置宽和高。height: 28px; display:inline-block;
内联块标签:可以让该标签拥有内联标签同时可以拥有独立的宽和高。
line-height: 28px;
设置行高和图片高度一致,是让图片和文字垂直居中
的一个小技巧。
下一篇:HTML和CSS 入门系列(二):文字、表单、表格、浮动、定位、框架布局、SEO
HTML和CSS 入门系列(一):超链接、选择器、颜色、盒模式、DIV布局、图片的更多相关文章
- HTML和CSS 入门系列(二):文字、表单、表格、浮动、定位、框架布局、SEO
上一篇:HTML和CSS 入门系列(一):超链接.选择器.颜色.盒模式.DIV布局.图片 一.文字 1.1 属性 1.2 字体样式:font-family 1.3 字体大小:font-size 1.4 ...
- H5教程(二),CSS入门(一)选择器
这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1. CSS简介 1.1 CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...
- HTML与CSS入门——第九章 使用颜色
知识点: 1.为网站选择颜色的方法 2.颜色在Web上的工作方式 3.使用十六进制颜色值的方法 4.使用CSS设置背景.文本和边框颜色的方法 9.1 选择颜色的最佳方法: 直白地说:根据用户群体找到最 ...
- vue 快速入门 系列 —— vue loader 上
其他章节请看: vue 快速入门 系列 vue loader 上 通过前面"webpack 系列"的学习,我们知道如何用 webpack 实现一个不成熟的脚手架,比如提供开发环境和 ...
- 前端开发HTML&css入门——伪类选择器和一些特殊的选择器
伪类和伪元素 有时候,你需要选择本身没有标签,但是仍然易于识别的网页部位,比如段落首行或鼠标滑过的连接.CSS为他们提供一些选择器:伪类和伪元素. 常用的一些伪类选择器: :link :visited ...
- css入门之css选择器
CSS选择器 css的选择器最常用的是class选择器,定义方式如下. <!DOCTYPE html> <html lang="en"> <head& ...
- 前端开发HTML&css入门——CSS&选择器练习
CSS 层叠样式表 (Cascading Style Sheets)css可以用来为网页创建样式表,通过样式表可以对网页进行装饰.所谓层叠,可以将整个网页想象成是一层一层的结构,层次高的将会覆盖层次低 ...
- 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 大前端系列,主要就是使用CSS3.0来实现,注释我已经打 ...
- Vue.js入门系列(一)
Vue官网: https://cn.vuejs.org/v2/guide/forms.html#基础用法 [入门系列] (一) http://www.cnblogs.com/gdsblog/p/78 ...
随机推荐
- Map<k,v>接口
https://docs.oracle.com/javase/8/docs/api/java/util/Map.html public interface Map<K,V> K—key,V ...
- VMware中centos7访问外网配置
1.配置虚拟机网络适配器,选择NAT模式 2.在编辑->虚拟机网络编辑器->更改设置 选择目前使用的网卡 3.通过ifconfig查看网卡配置 4.编辑网络配置对应上面网卡名称ens33 ...
- [Nest] 02.nest之控制器
控制器 Controller Nest 的核心概念 模块 Module 控制器 Controller 服务与依赖注入 Provider Dependency injection 控制器负责处理应用的特 ...
- Docker国内Yum源和国内镜像仓库
Docker国内Yum源和国内镜像仓库 2018年05月29日 :: nklinsirui 阅读数 6295更多 分类专栏: Docker 版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa ...
- 数据绑定-Java的基本数据类型绑定
Demo.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- java在遍历列表的时候删除列表中某个元素
在遍历list的时候需要删除其中的某些元素,不要用foreach遍历,需要用Iterator. List<String> list = new ArrayList<String> ...
- el-table + el-form实现可编辑表格字段验证
表格输入信息很常见,因此表格的验证也很必要,el-form提供了输入框验证.可以和表格结合起来用,使用效果 HTML: <div class="table_box"& ...
- 免费使用Google
这里需要借助一下`梯子`,这里有教程 点击进入 如果没有谷歌浏览器,进入下载最新版谷歌浏览器,进入下载,不要移动它的安装位置,选择默认位置, 如果已经安装了谷歌浏览器,打开赛风之后,选择设置 进行安装 ...
- 免费FQ工具
这里使用免费的`梯子` 下载赛风 选择Windows下载 下载好之后,直接点击打开,它会自动连接,什么也不要设置,下载的就是一个exe文件,连接成功会打开一个网页,不用管
- SecureCRT 连接 Centos7.0 (桥接模式),且能连接公网。
1.查看本地网络信息 ip:172.20.10.7 2.在VMware下配置Centos为桥接模式: 3.在Centos命令行输入 ip addr 查看Centos的mac地址 网口:eno16777 ...