【转型JAVA CSS 基础day02】
文章目录
- 一点感悟
- 一、CSS 学习资料
- 二、学习计划
- 三、学习感悟
- 第8章 CSS3选择器
- 第9章 CSS3的继承，优先级和重要性
- 第10章 CSS3的字体样式
- 设置字体状态 font-style:italic; 斜体 font-style:normal; 正常 font-style:oblique; 倾斜
- 第11章 CSS3的文本样式
- 第12章 CSS3盒模型
- 第13章 CSS3布局模型
- 第14章 flex弹性盒模型
- 总结
一点感悟
学习CSS的第二天
一、CSS 学习资料
课程还是慕课网
初识HTML(5)+CSS(3)-2020升级版
二、学习计划
今天的计划是从第八章到第十五章,也就是把这个资料学习完
三、学习感悟
第8章 CSS3选择器
标签选择器
h1{font-weight:normal;color:red;}
类选择器(类似span 列表)
.stress {color: red;}.setGreen{color:green;}
id 选择器 和类选择器一样 一个使用 井号（#）号，一个使用英文圆点（.）
#stress {color: red;}#setGreen{color:green;}
类选择器和id选择器的区别,类选择器可以多次使用,id选择器只能使用一次
子选择器
.food>li{border:1px solid red;}
后代选择器 大于(>)替换成空格( )
.food>li{border:1px solid red;}
通用选择器
* {color:red;font-size:20px;}
伪类选择器
a:hover {color:red;font-size:20px;}
分组选择器
h1,span{color:red;}
第9章 CSS3的继承，优先级和重要性
样式的继承
p {color: red;border:1px solid red;}
选择器的优先级 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器
#box {color:red;}.dv {color:green;}div {color:black;}* {color:blue;}<div id="box" class="dv">我是一个div</div> 权限计算 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
选择器最高层级!important 浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式<!important
p{color:red!important;}
第10章 CSS3的字体样式
设置字体格式
P{font-family:"宋体";}
设置字体大小
span {font-size:20px;}
设置字体加粗
a {font-weight:bold;}
设置字体状态
font-style:italic; 斜体
font-style:normal; 正常
font-style:oblique; 倾斜
设置字体颜色
.one {color:red;
}
设置字体的缩写
body {font-style: italic;font-weight: bold;font-size: 20px;line-height: 1.6em;font-family: "宋体", sans-serif;}
修改为
font:italic bold 20px 1.6em "宋体" sans-serif;
第11章 CSS3的文本样式
文本修饰
text-decoration:none;text-decoration:underline;text-decoration:overline;text-decoration:line-through;
首行缩进
p{text-indent:2em;}
设置行距
p{line-height:2em;}
设置文字或字母的间距
h1{letter-spacing:20px;word-spacing:50px;}
文本对齐方式
body{text-align:center;text-align:left;text-align:right;}长度值
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
下面注意一个特殊情况：
但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
<p>以这个<span>例子</span>为例。</p>
p{font-size:14px}
span{font-size:0.8em;}
百分比 设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
p{font-size:12px;line-height:130%}
第12章 CSS3盒模型
盒模型是CSS布局的基石，它规定了网页元素如何显示以及元素间相互关系。本章将围绕盒模型的概念、结构、尺寸等基础知识展开研究，以便为后面的学习和日后网页设计奠定扎实的基础。
看这个简介,这章体量应该比较大
三大元素 块状元素,内联元素,内联块状元素
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有：
<img>、<input>
快状元素特点
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
内联块状元素特点
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
内联块状元素声明
display:inline-block;
隐藏元素
p {display:none;}
盒子元素 生动形象的例子盒装月饼
<div> <ul> <ol> <p> <h> <table>
宽度和高度
盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
div{width:200px;padding:20px;border:1px solid red;margin:10px;
}
背景色
div {background-color: red;}a {background-color: green;}
边框
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用像素（px）。
p{border-width:2px;border-style:solid;border-color:#ccc;}
简写
p{border:2px dotted #ccc;}
仅设置下边框
border-bottom:1px dotted red;
border 圆角
border-radius:12px 30px 10px 30px;
padding 内边距(填充) 上、右、下、左(顺时针)
div{padding:20px 10px 15px 30px;}
div{padding-top:20px;padding-right:10px;padding-bottom:15px;padding-left:30px;
}
外边距
div{margin-top:20px;margin-right:10px;margin-bottom:15px;margin-left:30px;
}
第13章 CSS3布局模型
元素有三种布局模型：
1、流动模型（Flow）
由上而下 从左到右
2、浮动模型 (Float)
CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动
div {border: 2px red solid;width: 200px;height: 400px;float:left;}#div1{float:left;}#div2{float:right;}
3、层模型（Layer）
层模型有三种形式：
1、绝对定位(position: absolute)
div {position:absolute;right:100px;top:20px;}
2、相对定位(position: relative)
#div1 {width: 200px;height: 200px;border: 2px red solid;position:relative;left:100px;top:50px;}
3、固定定位(position: fixed)
#div1 {width: 200px;height: 200px;border: 2px red solid;position:fixed;right:0;bottom:0;}
相对和绝对结合(参照物)
#box3 {width: 200px;height: 200px;position:relative;}#box4 {width: 99%;position:absolute;bottom:0;}
第14章 flex弹性盒模型
弹性盒模型 flex属性
.box {background: blue;display: flex;}.box div {width: 200px;height: 200px;}
justify-content属性设置横轴排列方式
justify-content: flex-start | flex-end | center | space-between | space-around;
.box {background: blue;display: flex;justify-content: flex-start;}
竖轴- 使用align-items属性设置纵轴排列方式
align-items: flex-start | flex-end | center | baseline | stretch;
子元素设置flex占比
.box {height: 300px;background: blue;display: flex;}.box1 {flex: 2;background: red;}.box2 {flex: 3;background: orange;}.box3 {flex: 4;background: green;}
第15章 css样式设置小技巧
水平居中设置-行内元素
.txtCenter{text-align:center;}
定宽块设置居中
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
已知宽高实现盒子水平垂直居中
.box {border: 1px solid #00ee00;height: 300px;position:relative; /*父属性 相对定位*/}.box1 {width: 200px;height: 200px;border: 1px solid red;position:absolute; /*子属性 绝对定位*/top:50%;left:50%;margin:-100px 0 0 -100px; /*margin-top 的值为负的高度的一半 margin-left 的值为负的宽度的一半*/}
宽高不定实现盒子水平垂直居中
.box {border: 1px solid #00ee00;height: 300px;position: relative;}.box1 {border: 1px solid red;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
技术点的解释：
1、利用父元素设置相对定位,子元素设置绝对定位,那么子元素就是相对于父元素定位的特性。
2、子元素设置上和左偏移的值都为50%。
3、然后再用css3属性translate位移,给上和左都位移-50%距离，就能达到垂直水平居中的效果。
总结
以上为今天学CSS的全部内容,也算CSS入门了,下一步JS
【转型JAVA CSS 基础day02】相关推荐
- 【转型JAVA CSS 基础day01】
文章目录 一点感悟 一.CSS 学习资料 二.学习计划 三.学习感悟 第1章 HTML5介绍 第2章 HTML5语义化标签 第3章 HTML5效果标签 第4章 HTML5列表标签 第5章 HTML5图 ...
- Educoder/头歌JAVA——CSS从入门到精通——基础知识
目录 第1关:初识CSS:丰富多彩的网页样式 相关知识 CSS基本概念 CSS基础语法 选择器 声明 第2关:CSS样式引入方式 相关知识 样式引入方式 内部样式表 外部样式表 内联样式 使用哪一种样 ...
- 1,Java语言基础-Java语言概述和必要计算机知识
Java语言基础 Java语言概述 1,Java语言发展史 Java语言本质 Java是面向对象的高级语言,它是由c和c++发展而来. Java发展语言历史概述 Java 是由 James Gosli ...
- java负数右移_收入囊中篇---Java程序基础（二）
前言: 本篇是接着上一篇更新的,如果没有阅读上一篇的话,可以查阅或回顾一下. 1.收入囊中篇---Java基础必备知识(一) 2.收入囊中篇---Java程序基础(二) Java程序基础目录 1.Ja ...
- Java零基础学习难吗
java编程是入行互联网的小伙伴们大多数的选择,那么对于零基础的小伙伴来说Java零基础学习难吗?如果你是初学者,你可以很好的理解java编程语言.并不困难.如果你的学习能力比较高,那么你对Java的 ...
- java培训基础知识都学哪些
很多人都开始学习java技术,觉得java语言在未来的发展前景空间非常大,事实却是如此,那么针对于零基础的同学, 学习java技术需要学哪些呢?下面我们就来看看java培训基础知识都学哪些? java ...
- 你觉得什么才是 Java 的基础知识？
近日里,很多人邀请我回答各种j2ee开发的初级问题,我无一都强调java初学者要先扎实自己的基础知识,那什么才是java的基础知识?又怎么样才算掌握了java的基础知识呢?这个问题还真值得仔细思考. ...
- java语言基础及集合基础大总结
好好学java java知识分享/学习教程免费分享 关注 精彩内容 你所需要的java全套视频教程 你所需要的java电子图书 你所需要的大数据视频教程 你所需要的java练习项目 如 / 诗 近半个 ...
- Python基础day02 作业解析【6道 if 判断题、9道 循环题】
视频.源码.课件.软件.笔记:超全面Python基础入门教程[十天课程]博客笔记汇总表[黑马程序员] Python基础day02[if结构.if elif 结构.while循环.for循环.Break ...
最新文章
- 别人的Linux私房菜（17）进程管理与SELinux初探
- 摘自《读者》的哲理短句——赞美篇
- 天锐绿盾解密_天锐绿盾携手衡阳规划设计院 实现信息系统安全管理
- js 循环拆词_js 各种循环语法
- Java 斐波那契数列
- 华为 泰山 服务器 操作系统安装,华为Taishan服务器安装CentOS7操作系统
- 虚拟化与云计算（一）之 Lab1 使用 Hadoop Mapreduce 进行数据处理
- 关于might_sleep的一点说明---CONFIG_DEBUG_ATOMIC_SLEEP【转】
- 绝对定位实现漂浮工具条停靠在内容旁边
- paip.mysql 全文索引查询空白解决
- MySQL 官网下载各版本连接驱动
- java基础编程题书籍
- iShot——Mac上功能最全的截图、录屏创造工具
- 安全管家安卓_手机管家和顽固木马专杀哪个更好用
- 为什么新网站上线一个月都没有收录？
- 【51单片机STC89C52】LCD1602液晶屏的使用
- ValueError X has 2 features, but LogisticRegression is expecting 5 features as input
- [错误解决]centos中使用kubeadm方式搭建一个单master的K8S集群
- 让插入PPT的音乐跨幻灯片后同时播放
- 中文汉字转阿拉伯数字