从0开始学web-day5

1.复习

2.css的叠层
css的层叠
层叠：给一个元素同时使用多个选择器或者是样式表属性是相同的，但是属性值是不同的，最终生效的是谁
样式表：行内的优先级最高，内部和外部与书写顺序有个就近原则
选择器：默认情况下看选择器的权重，如果权重相同是就近原则
如果存在！important就生效这个
如果都存在！important就按照选择器的权重，如果权重相同就就近原则
如果自身没有从父元素中继承，就近原则
如果自身有就肯定会生效自身的

3.颜色的设置
1.文字颜色 color
颜色的色值：
css2.0
1.单词 color:red
2.十六进制color：#ff0000 缩写 color：#f00
3.三原色 color：rgb（255,0,0）rgb取值0-255
css3.0新增（低版本浏览器不支持）
1.三原色加透明度 rgba color：rgba（255,0,0,0.4） rgb的取值0-255 a的取值0-1 a代表透明度
2.hsl h色相（0-359） s饱和度（0-100%） l亮度（0-100%）
3.hsla a为透明度（0-1）

4.文字相关设置
1.文字颜色 color
2.文字的大小 font-size 单位：px常用 em rem pt 默认情况下16px=1em=1rem 9pt=12px
浏览器默认的文字大小是16px 常用的文字大小是12 14 16（medium） 18
3.文字的字体 font-family
如果是汉字的字体需要添加引号"楷体"，
如果是一个英文单词的英文字体不需要添加引号 font-family:Arial
如果是多个单词的英文字体要加引号font-family:“Times New Roman”
一个元素可以同时设置多个字体，浏览器会优先解析第一个字体，如果第一个不存在，则先后查找第二个。你设置的字体电脑上都不存在则按照系统默认设置
4.文字是否加粗 font-weight：normal正常 bold加粗 bolder更粗 lighter比正常的细
可以使用100-9–九个等级的写法 100-300=lighter 400-500=normal 600-900=bold
5.文字是否倾斜 font-style：normal正常 italic倾斜 oblique更倾斜
6.将小写字母变成小型的大写字母 font-variant：small caps小型的大写字母 normal默认正常
7.行高 line-height：值等于元素的height可以实现单行文本垂直方向的居中值px 可以不加单位代表的是文字大小的倍数百分比
缩写：font：font-varant font-style font-weight font-size/line-height font-family前三个顺序可以更改后边三个不能
工作中常用缩写 font：font-size/line-height font-family

5.文本设置
文本设置
1.词间距 word-spacing 可以设置负值
2.字符间距 letter-spacing 可以设置负值
3.英文字母大小写 text-transform：normal默认值 uppercase全部大写 lowercase全部小写 capitalize首字母大写
4.文本修饰 text-decoration：none没有 underline下划线 line-through删除线 overline上划线 blink闪烁的线三条线可以同时存在
5.首行缩进 text-index：2em（缩进两个字）可以设置负值
6.水平对齐方式 text-align：left默认 center居中 right居右 justify两端对齐（针对英文）
7.垂直对齐方式 vertical-align：top上 middle中 bottom下 baseline基线默认（目前属性只有img支持）

从0开始学web-day5相关推荐

【从0开始学web】89-150 php特性
[从0开始学web]89-150 php特性 [从0开始学web]89-150 php特性前言 web89 web90 web91 web92 web93 web94 web95 web96 web ...
2021-10-14【从0开始学web】279-300 java
[从0开始学web]279-300 java [从0开始学web]279-300 java web279 web278-297 279-297题都是struts2框架漏洞 Struts2是用Java语 ...
提升之路--从0开始学web自动化(7)--ui自动化框架搭建PO模式
ui自动化测试在整个测试过程中占据的地位在一个项目的测试中手工测试(60%)/自动化测试(40%),不同公司的定义不同.总体是手工占大部分而自动化测试中,接口自动化占据70% ui自动化测试优先实 ...
【从0到1学Web前端】javascript中的ajax对象（一）
[从0到1学Web前端]javascript中的ajax对象(一) 如今最流行的获取后端的(浏览器从server)数据的方式就是通过Ajax了吧.今天就来具体的来学习下这个知识吧.假设使用ajax来訪 ...
0基础转行IT行业学web前端好吗?
0基础转行IT行业学web前端好吗?目前互联网行业迅速发展,IT已经成为现在的一个非常热门的一个行业,许许多多的人都想要往IT方面发展,找IT方面相关的一个工作. 很多想要接触IT行业的初学者伤透了脑 ...
菜鸟学WEB开发 ASP.NET 5.0 1.0
菜鸟学WEB开发 ASP.NET 5.0 1.0 在学习之初我要强调一点"微软要向跨平台开发"大举进军了,不管他能走多远,这是微软的必经之路. 一.学习流程: 创建ASP.NET ...
【从 0 开始学架构】学习笔记 Day5 高性能基本概念
文章目录一.性能二.性能在计算机世界的两个方面表现三.软件系统高性能复杂度两个方面 1)单机复杂度 2)集群复杂度 (1)任务分配 (2)任务分解四.应对高并发挑战的两个技术方向 1.垂直伸缩 ...
0基础学怎么学习python
Python相对于其他编程语言来说是比较简单的,非常适合零基础的小白学习,想要进入到互联网行业,可以优先选择学习Python,那么下面小编就来为大家详细的介绍一下0基础学怎么学习python? ...
html语言难不难学,Web前端开发难学吗?
Web前端开发难学吗? 更新时间:2019年02月22日16时54分来源:传智播客web前端培训浏览次数: 关于Web前端开发难学吗?学Web前端都需要学习哪些内容?很多想要转行学习Web的同学还 ...
0基础学python难吗-0基础学武汉Python开发课程有多难？该怎么入门？
Python语言可谓十分强大,正如它的两个外号所称,一个是"内置电池",另一个是"胶水语言".开源社区和独立开发者长期为Python贡献了丰富大量的第三方库,其 ...

从0开始学web-day5

从0开始学web-day5相关推荐

最新文章

热门文章