Day4:html和css

规范注意

  1. 链接里面不能再放链接.
  2. a里面可以放入块级元素.

空格规范

选择器与{之间必须包含空格.

如:

  1. .class {}

属性名与之后的:符号之间不允许包含空格, 而:符号与属性值必须包含空格.

如:

  1. font-size: 23px;

选择器的规范

如:

  1. // 并集选择器
  2. .da,
  3. .shu,
  4. .coding {
  5.  color: blue;
  6. }

选择器的嵌套层级不大于3级就行.

  1. #da input {}
  2. .shu .coding {}

行高可以让一行文本在盒子中垂直居中对齐,文字的行高等于盒子的高度,行高-上距离-内容高度-下距离.

css三大特性是层叠,继承,优先级.

层叠 继承 优先级

  1. div {
  2.  height: 50px;
  3.  width: 200px;
  4.  background-color: pink;
  5.  line-height: 500px;
  6. }
  7. div: {
  8. }

css层叠样式表

css的优先级

  1. 使用!important声明的规则
  2. 使用内嵌声明
  3. 使用id选择器
  4. 使用类选择器,属性选择器,伪元素和伪类选择器
  5. 使用元素选择器
  6. 只包含一个通用选择器
  7. 同一类选择器则遵循就近原则

总结:权重是优先级的算法,层叠是优先级的表现

类选择器的优先级比标签的元素高.

我们在使用css的时候,会出现两个或多个规则在同一元素上,这时css就会出现优先级的情况.

在css中的样式继承权重值是为0的,不管父元素权重多大,被子元素继承时,它的权重都是为0,意思是子元素定义的样式会覆盖继承的样式,行内样式优先.在css中,如果权重相同,css就会遵循就近原则,则是靠近元素最近的样式为最大优先级.

在css中定义了!important命令,这个命令就被赋予最大的优先级.

  1. // 就近原则
  2. div {
  3.  color: red;
  4.  font-size: 50px;
  5. }
  6. div {
  7.  color: blue;
  8. }
  10. <div>达叔</div>

样式冲突,遵循就近原则,样式不冲突,不会层叠.

继承性,子承父业(部分继承,文本属性的继承)

  1. <div class="da">
  2.  <p> dd </p>
  3. </div>
  1. div {
  2.  color: red;
  3. }
  4. .da {
  5.  color: blue;
  6. }
  7. <div class="da">dashucoding</div>

特殊性

继承或者* 的贡献值 0,0,0,0
每个元素（标签）贡献值 0,0,0,1
每个类贡献值 0,0,1,0
每个ID贡献值 0,1,0,0
每个行内样式贡献值 1,0,0,0
每个!important贡献值 ∞ 无穷大

行内样式 , id , 类 , 标签

  1. #father {
  2.  color: red;
  3. }
  4. p {
  5.  color: blue;
  6. }
  8. <div id="father">
  9.  <p> 大佬 </p>
  10. </div>
  12. // blue
  1. p.c {
  2.  color: blue;
  3. }
  4. div p {
  5.  color: red;
  6. }
  7. #father {
  8.  color: red;
  9. }
  10. <body>
  11.  <div id="father" class="cc"
  12.  <p class="c"> dashucoding </p>
  13.  </div>
  14. </body>

背景

CSS 可以添加背景颜色和背景图片，以及图片设置。

background-color 背景颜色
background-image 背景图片地址
background-repeat 是否平铺
background-position 背景位置
background-attachment 背景固定还是滚动
背景的合写（复合属性） 无
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 无

backgroound-position

语法:

  1. background-position: length
  2. background-position: position

参数:

  1. length: 百分数
  2. position: top | center | right | left | bottom

background:背景颜色,背景图片地址,背景平铺,背景滚动,背景位置.

背景图片

语法：

  1. background-image : none | url (url)
  2. // none : 　无背景图（默认的）
  3. // url : 　使用绝对或相对地址指定背景图像
  4. 如果图片不重复地话，图片覆盖不到的地方都会被背景色填充,如果背景图片平铺，则会覆盖背景颜色。

背景平铺（repeat）

  1. background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数：

  1. repeat : 　背景图像在纵向和横向上平铺（默认的）

  2. no-repeat : 　背景图像不平铺

  3. repeat-x : 　背景图像在横向上平铺

  4. repeat-y : 　背景图像在纵向平铺

设置背景图片时，默认把图片在水平和垂直方向平铺以铺满整个元素。

  1. background-position : length || length
  2. background-position : position || position

参数:

  1. length : 　
  2. 百分数 | 由浮点数字和单位标识符组成的长度值
  3. position : 　
  4. top | center | bottom | left | center | right

背景附着

语法：

  1. background-attachment : scroll | fixed

参数：

  1. `scroll` : 　背景图像是随对象内容滚动
  2. `fixed` : 　背景图像固定

背景透明(CSS3)

  1. background: rgba(0,0,0,0.3);

background:

背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

图片效果展示：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Demo</title>
  6. 	<style>
  7. 	a {
  8. 		width: 66px;
  9. 		height: 33px;
  10. 		background: url(123.png) no-repeat left top;
  11. 		display: block;
  12. 	}
  13. 	a:hover {
  14. 		background-position: left bottom;
  15. 	}
  16. 	</style>
  17. </head>
  18. <body>
  19. 	<a href="#"></a>
  20. </body>
  21. </html>

引入css样式表

  1. 内部样式表
  2. 行内样式
  3. 外部样式表
  1. // 内部样式表
  2. <head>
  3. <style type="text/CSS">
  4.     选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
  5. </style>
  6. </head>
  1. // 行内式(内联样式)
  2. <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
  1. //  外部样式表（外链式）
  2. <head>
  3.   <link href="CSS文件的路径"  rel="stylesheet" />
  4. </head>

基础选择器

  1. 标签选择器（元素选择器）
  2. 类选择器
  3. 多类名选择器
  4. id选择器
  5. id选择器和类选择器区别
  6. 通配符选择器
  1. // 标签选择器（元素选择器）div  span
  2. 标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者
  3. 元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  1. // 类选择器
  2. .类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  1. // 多类名选择器
  2. <div class="pink fontWeight font">1</div>
  3. <div class="font">2</div>
  4. <div class="font pink">安3拉</div>
  5. <div class="font">4</div>
  1. // id选择器
  2. #id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  1. // 通配符选择器
  2. * { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
  4. * {
  5.   margin: 0;                    /* 定义外边距*/
  6.   padding: 0;                   /* 定义内边距*/
  7. }

字体样式属性

  1. font-size:字号大小
  2. font-family:字体
  3. font-weight:字体粗细 - 属性值：normal、bold、bolder、lighter、100~900（100的整数倍）- 数字 400 等价于 normal，而 700 等价于 bold。
  4. font-style:字体风格 - normal：默认值
  5. font:综合设置字体样式 (重点)
  1. // `font`属性
  2. 选择器{font: font-style  font-weight  font-size/line-height  font-family;}

外观属性

  1. color:文本颜色 - red，green，blue
  2. line-height:行间距
  3. text-align:水平对齐方式
  4. text-indent:首行缩进
  5. text-decoration 文本的装饰

CSS复合选择器

  1. 交集选择器
  2. 并集选择器
  3. 后代选择器
  4. 子元素选择器
  5. 伪类选择器
  1. // 交集选择器
  2. p.one  段落标签 类名为 .one
  1. // 并集选择器
  2. .one, p , #test {color: #F00;}
  1. // 后代选择器
  2. 后代选择器又称为包含选择器
  3. 当标签发生嵌套时，内层标签就成为外层标签的后代。
  1. // 子元素选择器
  2. 父级标签写在前面，子级标签写在后面
  3. .demo > h3 {color: red;}
  4. h3 一定是demo 亲儿子
  1. // 伪类选择器
  2. 类  .one
  3. 伪类 :link
  5. 链接伪类选择器
  6. - :link      /* 未访问的链接 */
  7. - :visited   /* 已访问的链接 */
  8. - :hover     /* 鼠标移动到链接上 */
  9. - :active    /* 选定的链接 */

CSS注释

  1. /*  需要注释的内容  */

标签显示模式

  1. 块级元素(block-level)
  2. 行内元素(inline-level)
  3. 行内块元素（inline-block）
  1. // 块级元素(block-level)
  2. 常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等
  3. （1）总是从新行开始
  4. （2）高度，行高、外边距以及内边距都可以控制。
  5. （3）宽度默认是容器的100%
  6. （4）可以容纳内联元素和其他块元素
  1. // 行内元素(inline-level)
  2. （1）和相邻行内元素在一行上。
  3. （2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
  4. （3）默认宽度就是它本身内容的宽度。
  5. （4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）
  1. 行内块元素（inline-block）
  2. （1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。
  3. （2）默认宽度就是它本身内容的宽度。
  4. （3）高度，行高、外边距以及内边距都可以控制。
  1. 块转行内：display:inline;
  2. 行内转块：display:block;
  3. 块、行内元素转换为行内块： display: inline-block;

三大特性

  1. CSS层叠性
  2. CSS继承性
  3. CSS优先级
  1. // CSS特殊性（Specificity）
  2. 权重是优先级的算法，层叠是优先级的表现

css背景

  1. 背景图片(image)
  2. 背景平铺（repeat）
  3. 背景位置(position)
  1. // 背景图片(image)
  2. background-image : none | url (url)
  3. none : 　无背景图（默认的）
  4. url : 　使用绝对或相对地址指定背景图像
  1. // 背景平铺（repeat）
  2. background-repeat : repeat | no-repeat | repeat-x | repeat-y
  3. repeat :          背景图像在纵向和横向上平铺（默认的）
  4. no-repeat : 　背景图像不平铺
  5. repeat-x : 　背景图像在横向上平铺
  6. repeat-y : 　背景图像在纵向平铺
  1. // 背景位置(position)
  2. background-position : length || length
  3. background-position : position || position
  5. length : 　百分数
  6. position : 　top | center | bottom | left | center | right
  1. // 背景附着
  2. background-attachment : scroll | fixed
  3. scroll : 　背景图像是随对象内容滚动
  4. fixed : 　背景图像固定

背景简写

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

案例:

  1. // css 层叠样式表
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<title>Demo</title>
  7. 	<style>
  8. 	div {
  9. 		color: red;
  10. 		font-size: 25px;
  11. 	}
  12. 	div {
  13. 		color: blue;
  14. 	}
  15. 	</style>
  16. </head>
  17. <body>
  18. 	<div>层叠样式表</div>
  19. </body>
  20. </html>
  1. // 继承权重为0的情况
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. 	<meta charset="UTF-8">
  6. 	<title>Demo</title>
  7. 	<style>
  8. 	.father { /* 0010*/
  9. 		color: green!important;
  10. 	}
  11. 	p {   /*0001*/
  12. 		color: red;
  13. 	}
  14. 	div p {
  15. 		color: blue;
  16. 	}
  17. 	</style>
  18. </head>
  19. <body>
  20. 	<div class="father">
  21. 		<p>继承权重为0的情况</p>
  22. 	</div>
  23. </body>
  24. </html>

背景透明

  1. background: rgba(0,0,0,0.3);

border

  1. border : border-width || border-style || border-color
  2. none：没有边框即忽略所有边框的宽度（默认值）
  3. solid：边框为单实线(最为常用的)
  4. dashed：边框为虚线
  5. dotted：边框为点线
  6. double：边框为双实线
  1. border-top-style:样式;
  2. border-top-width:宽度;
  3. border-top-color:颜色;
  4. border-top:宽度
  6. border-bottom-style:样式;
  7. border- bottom-width:宽度;
  8. border- bottom-color:颜色;
  9. border-bottom:宽度
  11. border-left-style:样式;
  12. border-left-width:宽度;
  13. border-left-color:颜色;
  14. border-left:宽度
  16. border-right-style:样式;
  17. border-right-width:宽度;
  18. border-right-color:颜色;
  19. border-right:宽度
  1. // 表格的细线边框
  2. collapse 单词是合并的意思
  3. table{ border-collapse:collapse; }
  1. // 圆角边框(CSS3)
  2. border-radius: 50%;
  1. // 内边距（padding）
  2. padding-top:上内边距
  3. padding-right:右内边距
  4. padding-bottom:下内边距
  5. padding-left:左内边距
  1. // 外边距（margin）
  2. margin-top:上外边距
  3. margin-right:右外边距
  4. margin-bottom:下外边距
  5. margin-left:上外边距
  6. margin:上外边距 右外边距  下外边距  左外边
  1. 文字水平居中是  text-align: center
  2. 盒子水平居中  左右margin 改为 auto

背景透明

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Demo</title>
  6. 	<style>
  7. 	body {
  8. 		background-color: pink;
  9. 	}
  10. 	div {
  11. 		width: 200px;
  12. 		height: 200px;
  13. 		color: #fff;
  14. 		background: rgba(0, 0, 0, 0.3);
  15. 	}
  16. 	</style>
  17. </head>
  18. <body>
  19. 	<div>
  20. 		文字
  21. 	</div>
  22. </body>
  23. </html>

盒子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Demo</title>
  6. 	<style>
  8. 	div {
  9. 		width: 200px;
  10. 		height: 200px;
  11. 		/*border-style: solid; 实线*/
  12. 		/*border-style: dashed;  虚线 的  */
  13. 		border-bottom: 2px solid green;
  14. 		border-left: 1px solid blue;
  15. 		border-right: 5px solid pink;
  16. 	}
  17. 	</style>
  18. </head>
  19. <body>
  20. 	<div></div>
  21. </body>
  22. </html>

表单边框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Demo</title>
  6. 	<style>
  7. 	input {
  8. 		border: 0;
  9. 		border-bottom: 1px dashed red;
  10. 	}
  11. 	button {
  12. 		width: 50px;
  13. 		height: 25px;
  14. 		border: 1px solid purple;
  15. 	}
  16. 	</style>
  17. </head>
  18. <body>
  19. 	用户名: <input type="text">
  20. 	<button>按钮</button>
  21. </body>
  22. </html>

内边距

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. 	<meta charset="UTF-8">
  5. 	<title>Demo</title>
  6. 	<style>
  7. 	div {
  8. 		width: 200px;
  9. 		height: 200px;
  10. 		border: 1px solid red;
  11. 		padding: 10px;
  12. 	}
  13. 	a {
  14. 		height: 35px;
  15. 		background-color: #ccc;
  16. 		display: inline-block;
  17. 		line-height: 35px;
  18. 		color: #fff;
  19. 		text-decoration: none;
  20. 		padding-left: 10px;
  21. 		padding-right: 10px;
  22. 	}
  23. 	</style>
  24. </head>
  25. <body>
  26. 	<div>文本信息</div>
  27. 	<a href="#">首页</a>
  28. </body>
  29. </html>

边框

  1. 	<style>
  2. 	table {
  3. 		width: 500px;
  4. 		height: 300px;
  5. 		border: 1px solid red;
  6. 	}
  7. 	td {
  8. 		border: 1px solid red;
  9. 		text-align: center;
  10. 	}
  11. 	table, td {
  12. 		border-collapse: collapse;
  13. 	}
  14. 	</style>

达叔小生：往后余生，唯独有你

You and me, we are family !

90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通

简书博客： 达叔小生

https://www.jianshu.com/u/c785ece603d1

结语

  • 下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
  • 小礼物走一走 or 点赞

Day4:html和css的更多相关文章

  1. Day6:html和css

    Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...

  2. Day5:html和css

    Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...

  3. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  4. Day4 HTML新增元素与CSS布局

    Day4  HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</n ...

  5. day4 CSS属性操作

    1.CSS属性 基本属性 height, 高度 百分比 width, 宽度 像素,百分比 text-align:ceter, 水平方向居中 line-height, 垂直方向根据标签高度 color. ...

  6. 中软培训第一周复习总结 --简单的HTML 与CSS

    一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...

  7. Python实例---模拟微信网页登录(day4)

    第五步: 获取联系人信息---day4代码 settings.py """ Django settings for weixin project. Generated b ...

  8. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  9. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

  1. Django 的认识，面试题

    Django 的认识,面试题 1. 对Django的认识? #1.Django是走大而全的方向,它最出名的是其全自动化的管理后台:只需要使用起ORM,做简单的对象定义,它就能自动生成数据库结构.以及全 ...

  2. kivy sdl2 - ImportError: DLL load failed: 找不到指定的模块。

    kivy version : windows:win python version:3.6 sdl2 - ImportError: DLL load failed: 找不到指定的模块. 运行以下dem ...

  3. 移值UCOS2到M4核与M3核的区别

    之前移值过ucos2到stm32f2系列的单片机,这个单片机是属于arm的m3内核的.最近在学习永磁同步电机的控制,对于这个电机的控制,有比较多的数学计算,甚至于还有浮点的运算.所以用到了stm32f ...

  4. 修改Tomcat控制台标题

    1.在tomcat的bin目录下新建文件setenv.bat 2.重启tomcat即可

  5. 《JAVA程序设计》第五周总结

    第五周学习总结 本周目录: 第六章知识梳理 本周学习时遇到的问题和解决过程 上周错题与解析 码云链接 感想 第六章知识梳理: 接口:使用关键字interface定义,分为接口声明和接口体. inter ...

  6. Hbase的基本操作(CDH组件可用)

    Habse创建一张表:    1,创建一个命名空间NameSpace(命名空间NameSpace指的是一个表的逻辑分组 ,同一分组中的各个表有类似的用途,相当于关系型数据库中的DataBase)    ...

  7. yarn查询/cluster/nodes均返回localhost

    背景: 1.已禁用ipv6. 2.所有节点的/etc/hosts正确配置,任务在ResourceManager提交. 3.yarn-site.xml中指定了 yarn.resourcemanager. ...

  8. windows下SVN服务器搭建--VisualSVN与TortoiseSVN的配置安装

    在讲解之前,我们来思考两个问题: 1.什么是版本控制 2.为什么要用版本控制工具 ----------------------------------------------------- 版本控制工 ...

  9. Codeforces 1083B The Fair Nut and Strings

    Description 给定两个由 \('a'\), \('b'\) 组成的字符串 \(a\), \(b\),以及两个整数 \(n\) 和 \(k\) \(n\) 表示字符串 \(a\),\(b\) ...

  10. 内核中hash表（以net_device为例）

    下边函数实现将新的 net_device 设备插入到内核链表中 /* * Device list insertion */ static void list_netdevice(struct net_ ...