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