Day4:html和css

Day4:html和css

规范注意

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

空格规范

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

如:

.class {}

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

如:

font-size: 23px;

选择器的规范

如:

// 并集选择器

.da,

.shu,

.coding {

 color: blue;

}

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

#da input {}

.shu .coding {}

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

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

层叠继承优先级

div {

 height: 50px;

 width: 200px;

 background-color: pink;

 line-height: 500px;

}

div: {

}

css层叠样式表

css的优先级

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

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

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

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

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

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

// 就近原则

div {

 color: red;

 font-size: 50px;

}

div {

 color: blue;

}

<div>达叔</div>

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

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

<div class="da">

 <p> dd </p>

</div>

div {

 color: red;

}

.da {

 color: blue;

}

<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 , 类 , 标签

#father {

 color: red;

}

p {

 color: blue;

}

<div id="father">

 <p> 大佬 </p>

</div>

// blue

p.c {

 color: blue;

}

div p {

 color: red;

}

#father {

 color: red;

}

<body>

 <div id="father" class="cc"

 <p class="c"> dashucoding </p>

 </div>

</body>

背景

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

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

backgroound-position

语法:

background-position: length

background-position: position

参数:

length: 百分数

position: top | center | right | left | bottom

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

背景图片

语法：

background-image : none | url (url)

// none : 　无背景图（默认的）

// url : 　使用绝对或相对地址指定背景图像

如果图片不重复地话，图片覆盖不到的地方都会被背景色填充,如果背景图片平铺，则会覆盖背景颜色。

背景平铺（`repeat`）

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

参数：

repeat : 　背景图像在纵向和横向上平铺（默认的）
no-repeat : 　背景图像不平铺
repeat-x : 　背景图像在横向上平铺
repeat-y : 　背景图像在纵向平铺

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

background-position : length || length

background-position : position || position

参数:

length : 　

百分数 | 由浮点数字和单位标识符组成的长度值

position : 　

top | center | bottom | left | center | right

背景附着

语法：

background-attachment : scroll | fixed

参数：

`scroll` : 　背景图像是随对象内容滚动

`fixed` : 　背景图像固定

背景透明(`CSS3`)

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

background:

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

图片效果展示：

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	a {

		width: 66px;

		height: 33px;

		background: url(123.png) no-repeat left top;

		display: block;

	}

	a:hover {

		background-position: left bottom;

	}

	</style>

</head>

<body>

	<a href="#"></a>

</body>

</html>

引入`css`样式表

内部样式表
行内样式
外部样式表

// 内部样式表

<head>

<style type="text/CSS">

    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}

</style>

</head>

// 行内式(内联样式)

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

//  外部样式表（外链式）

<head>

  <link href="CSS文件的路径"  rel="stylesheet" />

</head>

基础选择器

标签选择器（元素选择器）
类选择器
多类名选择器
id选择器
id选择器和类选择器区别
通配符选择器

// 标签选择器（元素选择器）div  span

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }  或者

元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

// 类选择器

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

// 多类名选择器

<div class="pink fontWeight font">1</div>

<div class="font">2</div>

<div class="font pink">安3拉</div>

<div class="font">4</div>

// id选择器

#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

// 通配符选择器

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

* {

  margin: 0;                    /* 定义外边距*/

  padding: 0;                   /* 定义内边距*/

}

字体样式属性

font-size:字号大小
font-family:字体
font-weight:字体粗细 - 属性值：normal、bold、bolder、lighter、100~900（100的整数倍）- 数字 400 等价于 normal，而 700 等价于 bold。
font-style:字体风格 - normal：默认值
font:综合设置字体样式 (重点)

// `font`属性

选择器{font: font-style  font-weight  font-size/line-height  font-family;}

外观属性

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

`CSS`复合选择器

交集选择器
并集选择器
后代选择器
子元素选择器
伪类选择器

// 交集选择器

p.one  段落标签 类名为 .one

// 并集选择器

.one, p , #test {color: #F00;}

// 后代选择器

后代选择器又称为包含选择器

当标签发生嵌套时，内层标签就成为外层标签的后代。

// 子元素选择器

父级标签写在前面，子级标签写在后面

.demo > h3 {color: red;}

h3 一定是demo 亲儿子

// 伪类选择器

类  .one

伪类 :link

链接伪类选择器

- :link      /* 未访问的链接 */

- :visited   /* 已访问的链接 */

- :hover     /* 鼠标移动到链接上 */

- :active    /* 选定的链接 */

`CSS`注释

/*  需要注释的内容  */

标签显示模式

块级元素(block-level)
行内元素(inline-level)
行内块元素（inline-block）

// 块级元素(block-level)

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等

（1）总是从新行开始

（2）高度，行高、外边距以及内边距都可以控制。

（3）宽度默认是容器的100%

（4）可以容纳内联元素和其他块元素

// 行内元素(inline-level)

（1）和相邻行内元素在一行上。

（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。

（3）默认宽度就是它本身内容的宽度。

（4）行内元素只能容纳文本或则其他行内元素。（a特殊 a里面可以放块级元素 ）

行内块元素（inline-block）

（1）和相邻行内元素（行内块）在一行上,但是之间会有空白缝隙。

（2）默认宽度就是它本身内容的宽度。

（3）高度，行高、外边距以及内边距都可以控制。

块转行内：display:inline;

行内转块：display:block;

块、行内元素转换为行内块： display: inline-block;

三大特性

CSS层叠性
CSS继承性
CSS优先级

// CSS特殊性（Specificity）

权重是优先级的算法，层叠是优先级的表现

`css`背景

背景图片(image)
背景平铺（repeat）
背景位置(position)

// 背景图片(image)

background-image : none | url (url)

none : 　无背景图（默认的）

url : 　使用绝对或相对地址指定背景图像

// 背景平铺（repeat）

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

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

no-repeat : 　背景图像不平铺

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

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

// 背景位置(position)

background-position : length || length

background-position : position || position

length : 　百分数

position : 　top | center | bottom | left | center | right

// 背景附着

background-attachment : scroll | fixed

scroll : 　背景图像是随对象内容滚动

fixed : 　背景图像固定

背景简写

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

案例:

// css 层叠样式表

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		color: red;

		font-size: 25px;

	}

	div {

		color: blue;

	}

	</style>

</head>

<body>

	<div>层叠样式表</div>

</body>

</html>

// 继承权重为0的情况

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	.father { /* 0010*/

		color: green!important;

	}

	p {   /*0001*/

		color: red;

	}

	div p {

		color: blue;

	}

	</style>

</head>

<body>

	<div class="father">

		<p>继承权重为0的情况</p>

	</div>

</body>

</html>

背景透明

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

`border`

border : border-width || border-style || border-color

none：没有边框即忽略所有边框的宽度（默认值）

solid：边框为单实线(最为常用的)

dashed：边框为虚线

dotted：边框为点线

double：边框为双实线

border-top-style:样式;

border-top-width:宽度;

border-top-color:颜色;

border-top:宽度

border-bottom-style:样式;

border- bottom-width:宽度;

border- bottom-color:颜色;

border-bottom:宽度

border-left-style:样式;

border-left-width:宽度;

border-left-color:颜色;

border-left:宽度

border-right-style:样式;

border-right-width:宽度;

border-right-color:颜色;

border-right:宽度

// 表格的细线边框

collapse 单词是合并的意思

table{ border-collapse:collapse; }

// 圆角边框(CSS3)

border-radius: 50%;

// 内边距（padding）

padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

// 外边距（margin）

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距  下外边距  左外边

文字水平居中是  text-align: center

盒子水平居中  左右margin 改为 auto

背景透明

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	body {

		background-color: pink;

	}

	div {

		width: 200px;

		height: 200px;

		color: #fff;

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

	}

	</style>

</head>

<body>

	<div>

		文字

	</div>

</body>

</html>

盒子

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 200px;

		height: 200px;

		/*border-style: solid; 实线*/

		/*border-style: dashed;  虚线 的  */

		border-bottom: 2px solid green;

		border-left: 1px solid blue;

		border-right: 5px solid pink;

	}

	</style>

</head>

<body>

	<div></div>

</body>

</html>

表单边框

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	input {

		border: 0;

		border-bottom: 1px dashed red;

	}

	button {

		width: 50px;

		height: 25px;

		border: 1px solid purple;

	}

	</style>

</head>

<body>

	用户名: <input type="text">

	<button>按钮</button>

</body>

</html>

内边距

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Demo</title>

	<style>

	div {

		width: 200px;

		height: 200px;

		border: 1px solid red;

		padding: 10px;

	}

	a {

		height: 35px;

		background-color: #ccc;

		display: inline-block;

		line-height: 35px;

		color: #fff;

		text-decoration: none;

		padding-left: 10px;

		padding-right: 10px;

	}

	</style>

</head>

<body>

	<div>文本信息</div>

	<a href="#">首页</a>

</body>

</html>

边框

	<style>

	table {

		width: 500px;

		height: 300px;

		border: 1px solid red;

	}

	td {

		border: 1px solid red;

		text-align: center;

	}

	table, td {

		border-collapse: collapse;

	}

	</style>

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

You and me, we are family !

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

简书博客：达叔小生

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

结语

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

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

Day6:html和css
Day6:html和css 复习 margin: 0; padding: 0; <!DOCTYPE html> <html lang="en"> <h ...
Day5:html和css
Day5:html和css 如何实现盒子居中问题,要让盒子实现水平居中,要满足是快级元素,而且盒子的宽度要定义.然后数值为auto即可. .dashu { width: 100px; margin: ...
Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
Day4 HTML新增元素与CSS布局
Day4 HTML新增元素与CSS布局 HTML新增属性: 一:常见的布局标签(都是块级元素) <header>头部</header> <nav>导航</n ...
day4 CSS属性操作
1.CSS属性基本属性 height, 高度百分比 width, 宽度像素,百分比 text-align:ceter, 水平方向居中 line-height, 垂直方向根据标签高度 color. ...
中软培训第一周复习总结 --简单的HTML 与CSS
一些需要记住的点: day1 HTML格式及简单标签: html 文件一般格式: 1 <html> 2 <head lang="en"> 3 <met ...
Python实例---模拟微信网页登录(day4)
第五步: 获取联系人信息---day4代码 settings.py """ Django settings for weixin project. Generated b ...
CSS的未来
仅供参考前言完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

随机推荐

Top值
业务开发中经常会用到元素或者浏览器窗口的各种top值,最近开发组件的过程中也遇到各种问题,因此决定好好总结一下. 常见的top值 scrollTop Element.scrollTop 属性可以获取或 ...
angular使用Md5加密
一.现象用户登录时需要记住密码的功能,在前端需要对密码进行加密处理,增加安全性二解决 1.利用npm(如果没有,先自行安装npm)安装ts-md5 npm install ts-md5 --sav ...
EL表达式、JSTL标签库
一.EL(Expression Language)表达式语法结构:${var} 若要停用对EL表达式的评估的话,需要使用page指令将isELIgnored属性值设为true: <%@ pag ...
mongodb的配置文件详解()
官方地址 https://docs.mongodb.com/manual/reference/configuration-options/#configuration-file 以下页面描述了Mon ...
vue中提示$index is not defined
今天学习Vue中遇到了一个报错信息:$index is not defined,是我写了个for循环在HTML中,然后是因为版本的问题下面是解决方法: 原来的是 v-for="person ...
Windows上Kafka运行环境安装
1. 安装JDK 1.1 安装文件:http://www.oracle.com/technetwork/java/javase/downloads/index.html 下载JDK1.2 安装完成后需 ...
node-sass 不能正常安装解决办法
web前端在安装node包时,总是报错,究其原因是node-sass没有被正常安装. 根本原因是国内网络的原因. 最终的解决方法是通过淘宝的npm镜像安装node-sass 首先安装cnpm npm ...
vue，react，angular
一.Vue.js: 其实Vue.js不是一个框架,因为它只聚焦视图层,是一个构建数据驱动的Web界面的库. Vue.js通过简单的API(应用程序编程接口)提供高效的数据绑定和灵活的组 ...
js html标签select 中option 删除除了第一行外的其他行
背景:共两个下拉框,第一个下拉框选择完之后,以第一个选定的值为条件返回第二个下拉框中的内容,用js中的createElement()创建,并利用appendChild()来添加进父标签.出现意外:每次 ...
学习Acegi应用到实际项目中（7）- 缓存用户信息
在默认情况下,即在用户未提供自身配置文件ehcache.xml或ehcache-failsafe.xml时,EhCache会依据其自身Jar存档包含的ehcache-failsafe.xml文件所定制 ...

Day4:html和css

特殊性

背景

背景图片

背景平铺（repeat）

背景附着

背景透明(CSS3)

引入css样式表

基础选择器

字体样式属性

外观属性

CSS复合选择器

CSS注释

标签显示模式

三大特性

css背景

border

背景透明

盒子

表单边框

结语

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

随机推荐

热门专题

背景平铺（`repeat`）

背景透明(`CSS3`)

引入`css`样式表

`CSS`复合选择器

`CSS`注释

`css`背景

`border`