CSS引入方式:
1. 行内式: <div style = "..."></div>
(使用最少,因为会产生冗余,而且不符合W3C规定)
2. 内嵌式: <style> ... (写的是样式)... </style>
(不会有冗余)
3. 外链式:<link href = "style.css">
(用的最多)
优先级: 1. 若行内样式存在,优先级最高 2. 剩下两个哪个在下面那个生效。
基本语法:
选择器{
属性:属性值;
属性:属性值;
}
选择器表示要定义样式的对象(标签名字),可以是元素本身,也可以是一类元素或者指定名称(id名或class名)的元素,简单来说就是给队形的元素起个名字。
一、基本选择器:
*{
margin: 0;
padding: 0;
}
h1{
color: cyan;
}
h1{
color: cyan;
}
puple{
color: darkmagenta;
}
- 尽量使用英文单词。
- 多个单词用_或-链接,或者使用驼峰命名。
- 不能以数字开头
- 一个标签可以使用多个class名
#number{
color: darkturquoise;
}
[属性名=属性值]
input[name = username] {
}
<input name="username">
-尽量使用英文单词。
-多个单词用_或-链接,或者使用驼峰命名。
-不能以数字开头
-一个页面中一个id名只能使用一次
-一个标签只能有一个id名
二、复合选择器: 6. 并集选择器(,)
h1,
p,
div,
.red,
#rr {
color: brown;
}
p.red{
font-size: 10px;
}
.red.box{
font-size: 30px;
}
- 只能选择儿子
- 只要是后代,儿子孙子曾孙子都可
:hover 鼠标悬停状态
:active 鼠标点击时的状态
:link 初始状态
:visited 鼠标点过之后状态
margin:0 auto;
text-decoration:none
清除a标签的下划线。颜色表示法: 1. 英文单词 2. 十六进制 #rrggbb (数字从0~f)相同的可以省略为3个数 3. rgb(0-255 , 0-255 , 0-255) red green blue 4. rgba(0-255 ,0-255 ,0-255, 0-1)
如果给同一个标签设置了相同的属性,此时样式会层叠(覆盖),写在最下面的会生效。
background-color:
背景图片:
background-image:url()
是否平铺:
background-repeat:no-repeat;
//不平铺
背景位置:
background-position
背景属性连写:
background:color image repeat position;
特点:
标签: div p h系列 nav header footer form dl/dt/dd ul/li ol/li
特点:
标签: a span b,u,i,s,strong,ins,em,del
特点:
标签: input img textarea select button
属性 | 说明 |
---|---|
display:block | 转为块级元素 |
display:inline | 转为行内元素 |
display:inline-block | 转为行内块元素 |
一、层叠性: 所谓层叠性是指多种CSS样式的叠加 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个标签上,这就是样式冲突。一般情况下,如果出现样式冲突,则会按照CSS书写的顺序,以最后样式为准。
二、继承性: 所谓继承性是指书写CSS样式表时,子标签汇集成父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需要将它应用于父标签即可。 简而言之,就是子承父业(注意:只有控制文字属性才可以继承)
三、优先级: 定义CSS样式时,经常出现两个或者更多规则应用在统一标签上,这时就会出现优先级的问题。一般来说,选择器权值越大,样式优先级越高。 继承< 通配符 < 标签 < 类 < id < 行内样式 < !important (简记为,哪个选择器能够更精准的选到,哪个优先级更高) 注意:!important 不能提高继承属性的优先级
复合选择器优先级
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也是一个盛装内容的容器。每个矩形都有元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。
内容:
通过为标签设置width和height属性值来规定标签的content内容区域的大小。标签的内容以及子标签默认从内容区域开始排列。
内边距:
定义标签边框与标签内容之间的空间
简写 padding属性
边框:
css边框属性用来设置边框的宽度、风格和颜色。
border 简写属性(类似padding属性)
例如:
.box1{
height: 0;
width: 0;
border: 50px solid black;
border-color: orange blue green pink;
}
.box2{
height: 0;
width: 0;
border-style: solid;
border-width: 50px 100px;
border-color: purple yellow yellow purple;
}
.box3{
height: 0;
width: 0;
border-style: solid;
border-width: 50px;
border-color: purple rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
}
效果:
外边距:
margin属性用于设置外边距。设置外边距会在元素之间创建空白,这段空白通常不能放置其他的内容。
简写属性margin(类似padding属性,与padding不同的是可以设置负值【向反方向偏移】)
.container{
width: 1000px;
height: 500px;
background-color: blueviolet;
margin: 0 auto;
}
这样我们在设置margin、padding属性时,盒子不会被撑大。
box-sizing : border-box;
* {
margin: 0;
padding: 0;
}
body{
line-height: 1;
}
一、相邻块元素垂直外边距的合并。 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则它们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷。
.box1{
width: 100px;
height: 100px;
background-color: rebeccapurple;
margin-bottom: 100px;
}
.box2{
width: 90px;
height: 90px;
background-color: red;
margin-top: 50px;
}
// 两块之间的距离是 100px
二、嵌套块元素垂直外边距的合并 对于嵌套关系的块元素,如果父元素没有上内边距以及边框,则父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者,即使父元素的上外边距为0,也会发生合并。 (若父元素有border或padding属性,则不会出现上述)
.parent{
width: 1000px;
height: 500px;
background-color: red;
margin-top: 80px;
}
.child{
width: 500px;
height: 250px;
background-color: greenyellow;
margin-top: 50px;
}
标准流: 含义:按照正常布局顺序来显示标签。
浮动元素会脱离网页文档,与其他元素发生重叠。但,不会与文字内容发生重叠。(文字环绕效果)
例子:
<style type="text/css">
.green{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.red{
width: 200px;
height: 150px;
background-color: red;
}
.a{
width: 200px;
background-color: rosybrown;
}
.b{
width: 700px;
background-color: royalblue;
}
.c{
width: 300px;
background-color: blue;
}
.a,.b,.c{
float: left;
height: 200px;
}
</style>
</head>
<body>
<p>文字环绕效果</p>
<div class="green"></div>
<div class="red">
月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁月❤宁
</div>
<p>横向排版布局</p>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
效果:
浮动特点:
text-aling:center
或者margin:0 auto;
清除浮动元素的影响: 设置一个父元素,使父元素的高度保持正常 1. 给父元素增加一个样式overflow:auto;(overflow表示溢出),这个样式的意思是对于超出边界的元素,父元素可以自动调整。 2. 使用clear:left/right/both;(clear意思清除浮动),当前元素如果不想受到前面浮动元素影响时,增加clear。
left表示当前元素不受到左浮动影响
right表示当前元素不受到右浮动影响
both表示当前元素不受到左和右浮动影响
浮动元素在排列时,只参考前一个元素位置即可。
右浮动的顺序与代码编写顺序相反
浮动元素的重叠问题
只能省略颜色