day02-css
技术分析
HTML的块标签:
div标签: 默认占一行,自动换行
span标签: 内容显示在同一行
CSS概述:
Cascading Style Sheets : 层叠样式表
主要用作用:
用来美化我们的HTML页面的
HTML 决定网页的骨架 ,CSS 化妆
将页面的HTML和美化进行分离
CSS的简单语法:
在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中
<style>
选择器{
属性名称:属性的值;
属性名称2: 属性的值2;
}
</style>
CSS选择器
帮助我们找到我们要修饰的标签或者元素
元素选择
元素的名称{
属性名称:属性的值;
属性名称:属性的值;
}
ID选择器
以#号开头 ID在整个页面中必须是唯一的s
#ID的名称{
属性名称:属性的值;
属性名称:属性的值;
}
类选择器
以 . 开头
.类的名称{
属性名称:属性的值;
属性名称:属性的值;
}
CSS中的其它选择器
选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}
属性选择器:
a[title]
a[titile='aaa']
a[href][title]
a[href][title='aaa']
后代选择器: 爷爷选择器 孙子选择器 找出所有的后代
子元素选择器: 父选择器 > 儿子选择器
伪类选择器: 通常都是用在A标签上
CSS的引入方式
- 外部样式: 通过link标签引入一个外部的css文件
- 内部样式: 直接在style标签内编写CSS代码
- 行内样式: 直接在标签中添加一个style属性, 编写CSS样式
扩展
- CSS的优先级 按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器 就近原则: 哪个离得近,就选用哪个的样式 CSS: 层叠样式表 主要作用:
- 美化页面
- 将页面美化和HTML代码进行分离,提高代码的服用型
选择器:
- 元素选择器: 标签的名称{}
- 类选择器: 以. 开头 .类的名称
- ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)
CSS浮动:
float : left, right 不再占有正常文档流中的空间 , 流式布局
clear : both left right
CSS的盒子模型
- 万物皆盒子
内边距
padding-top: padding-right: padding-bottom: padding-left:
padding:10px; 上下左右都是10px
padding:10px 20px; 上下是10px 左右是20px
padding: 10px 20px 30px; 上 10px 右20px 下30px 左20px
padding: 10px 20px 30px 40px; 上右下左, 顺时针的方向
外边距
margin-top: margin-right: margin-bottom: margin-left:
CSS绝对定位
position: absolute top: 控制距离顶部的位置 left: 控制距离左边的位置
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!终于完工,回去睡觉
day02-css的更多相关文章
- 超全面的JavaWeb笔记day02<CSS&JavaScript>
1.CSS的简介 2.CSS概述和与HTML的结合方式(四种)(*******) 3.CSS的基本选择器(******) 4.CSS的扩展选择器(了解) 5.CSS的盒子模型(了解) 6.CSS的布局 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- 2020年12月-第02阶段-前端基础-CSS Day02
CSS Day02 复合选择器 后代选择器 并集选择器 1. CSS复合选择器 理解 理解css复合选择器分别的应用场景 为什么要学习css复合选择器 CSS选择器分为 基础选择器 和 复合选择器 , ...
- css.day02.eg
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css.day02
1.复合选择器 复合选择器 一般会有几个标签混合使用 .把多个组合成一个 称之为复合 1.1标签指定式 复合选择器 (交集选择器) 格式: 标记选择器+ 类名/ID名称 { 属性:值;} 实际情况用 ...
- day-02(css,js)
本文档并非个人所写,只是便于参考:回顾: html: 作用:展示 文件标签: <html> <head> <title></title> </he ...
- Day02 html回顾和CSS介绍
昨天内容回顾 1.html的操作思想 ** 使用标签把要操作的数据包起来,通过修改标签的属性值来实现标签内数据样式的变化 *** <font size=& ...
- 2021年3月-第02阶段-前端基础-HTML+CSS阶段-Day02
HTML5 第二天 一.rotate 2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转 使用步骤: 给元素添加转换属性 transform 属性值为 rotate(角度) 如 transfor ...
- 《Professional JavaScript for Web Developers》day02
<Professional JavaScript for Web Developers>day02 1.在HTML中使用JavaScript 1.1 <script>元素 HT ...
- css给html添加效果
<!doctype html> <html> <head> <title>EasyMall注册界面</title> <meta htt ...
随机推荐
- Knapsack Cryptosystem
Knapsack Cryptosystem 超大背包 折半查找 #include<bits/stdc++.h> using namespace std; typedef long long ...
- POJ 1385 Lifting the Stone (多边形的重心)
Lifting the Stone 题目链接: http://acm.hust.edu.cn/vjudge/contest/130510#problem/G Description There are ...
- token与安全
http://ju.outofmemory.cn/entry/134189 关于 Token,你应该知道的十件事 https://blog.csdn.net/Fabulous1111/art ...
- 尚硅谷Docker---1-5、docker简介
尚硅谷Docker---1-5.docker简介 一.总结 一句话总结: docker是环境打包:有点像windows镜像 docker的实质:缩小版.精细版.高度浓缩版的一个小型的linux系统 1 ...
- rich-text 副文本组件 text文本组件
rich-text 副文本组件 要知道我们小程序常用的标签是view 但是我们想使用div span h1 i 标签等等,这种带特性的标签,怎么办的,我们就可以使用我们的 rich-text组件 ...
- linux 互斥量
互斥量(mutex)从本质上来说是一把锁,在访问共享资源前对互斥量进行加锁,在访问完后释放互斥量上的锁. 对互斥量进行加锁以后,任何其他试图再次对互斥量加锁的线程都将会被阻塞直到当前线程释放该互斥锁. ...
- 快速入门分布式消息队列之 RabbitMQ(1)
目录 目录 前言 简介 安装 RabbitMQ 基本对象概念 Message 消息 Producer 生产者 Consumer 消费者 Queue 队列 Exchange 交换机 Binding 绑定 ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_06 Set集合_5_HashSet存储自定义类型元素
想存储的元素不重复,就必须重写hashCode和equals这两个方法 新建一个Person类.添加姓名和年龄这两个成员变量..get和set,有参和无参构造. 重点是重写了toString的方法 自 ...
- Linux-档案权限概念
第一欄代表這個檔案的類型與權限(permission): 這個地方最需要注意了!仔細看的話,你應該可以發現這一欄其實共有十個字元:(圖5.2.1及圖5.2.2內的權限並無關係) 圖5.2.2.檔案的類 ...
- Pycharm中使用virtualenv创建虚拟环境
虚拟环境是Python解释器的一个私有副本,在这个环境中你可以安装私有包,而且不会影响系统中安装的全局Python解释器. 虚拟环境非常有用,可以在系统的Python解释器中避免包的混乱和版本的冲突. ...