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 ...
随机推荐
- Lock Puzzle CodeForces - 936C (构造)
大意: 给定字符串$s$,$t$, 每次操作可以将$S=AB$变为$S=B^RA$, 要求$3n$次操作内将$s$变为$t$. #include <iostream> #include & ...
- vs nuget找不到包
nuget.org https://api.nuget.org/v3/index.json
- php重定向的三种方法分享
一.用HTTP头信息 也就是用PHP的HEADER函数.PHP里的HEADER函数的作用就是向浏览器发出由HTTP协议规定的本来应该通过WEB服务器的控制指令,例如: 声明返回信息的类型(" ...
- 前端点击下载excel表格数据
<el-button type="primary" @click="downloadChartData" size="mini"> ...
- dubbo学习笔记四(异步调用)
相关资料 官方文档 项目结构 代码示例 [EchoTestApp] @RestController @SpringBootApplication @ImportResource("class ...
- Nginx编译参数详解
Nginx编译参数 1.当我们安装好nginx后,输入命令 nginx -V 可以看到nginx的编译参数信息,例如 如下图 2. 编译参数如下图 # Nginx安装目的目录或路径 --prefix ...
- iOS响应链和传递机制
iOS中加载的时候会先执行main函数 int main(int argc, charchar * argv[]) { @autoreleasepool { return UIApplicationM ...
- 英国电信选择由 Canonical 开发的 Ubuntu OpenStack 作为云平台
英国电信(简称 BT,British Telecom)宣布,选择由 Canonical 开发的 Ubuntu OpenStack 作为云平台,该平台将有助于支持引入 5G 和光纤到户的连接. 作为 U ...
- vm安装ubantu的详细过程(转载)
这里转载一个非常实用的vm虚拟机安装linux系统的文章有需要的可以看下面链接: https://blog.csdn.net/u013142781/article/details/50529030
- RAID原理详解
RAID 0(stripe,条带化存储):在RAID级别中最高的存储性能. 原理:是把连续的数据分散到多个磁盘上存取,系统有数据请求就可以被多个磁盘并行的执行,每个磁盘执行属于他自己的那部分数据请求. ...