HTML --css笔记:
一.css引入方式
1.行内式(不推荐使用):
直接在标签里面加style-css样式,这样是可以添加,但是会出现很同样标签,所以一般不推荐
和使用这样的方式去添加css样式.
使用方法: <p style="color:green">这里放设置文本</p> 直接在标签属性添加style-css样式
2.内接样式(页面较小的时候使用哟 ***):
内接样式是针对页面比较小的情况,才会使用.
使用方法:就可以直接在head 标签里面添加:<style> 直接在这里写cass样式</style>
3.外接样式:
(1) 链接式 ***
这个是常用的方式,链接式一般都是会另外写一个文件,然后通过link 样式文件进来.
使用方法:<link rel="stylesheet" href="这里放cass文件">
(2) 导入式
同样也是另外写css文件然后导入,不建议使用,因为页面css加载不出来时候,会显示 html 的页面,有加载延迟
导入式是使用方法: @import url("这里放css文件")
二.选择器
*** 注意点: css优先级,指的是浏览器加载 cass 样式的先后顺序 ***
1.基本选择器
(1) 标签选择器
直接使用标签名来做选择器,而不是在另外设置属性,调用属性的( 值 )
使用方法:直接标签来写在里面,任何标签都是可以找到的.
<style>
p{
color:blue;
}
</style>
(2) 类选择器 ***
在标签属性里面设置: <div class="这里就是要用来设置css的值:aaa"> 这里放你要修饰的值</div>
使用方法:类选择器前面要加 .+值{ }
<style>
.aaa{
color: #fff;
}
</style>
***类选择器可以优化: 优化方式: 如果你要修饰的 模块 或 标签 都有同的css样式 ,那么
就可以写在同一个样式,同时调用一个样式就可以,减少代码.
# css样式
.lv{
color: green;
}
.big{
font-size: 40px;
}
.line{
text-decoration: underline;
}
# HTML内容 :公共类 共有的属性
<div>
<p class="lv big">段落1</p>
<p class="lv line">段落2</p>
<p class="line big">段落3</p>
</div>
*** 这样的话就会减少写了一般打代码
(3) id 选择器
页面里面 id 是唯一的,给模块、标签等只要设置 id 选择器 无论是在哪里都是可以直接调用
的 但是 id 往往最好留给js使用,除非特殊情况,所以推荐使用类选择器哟.
使用方法: <p id="aaa">这里要修饰的值</p> id调用的话前面必须使用 # 列如: #aaa{ }
*** 这里要注意选择器的权重是: id :100 --> class :10 标签 : 1 所以优先级判断就是谁权重大 谁就获得
修饰权优先.
2.高级选择器
<div class="father">
yuan
<p class="box1">
egon
<span class="sun">alex</span>
</p>
</div>
<span>wusir</span>
(1) 后代选择器(中间要加个空格)
这里使用的是就是 从父亲->儿子->孙子的一个过程就是后代选择器
一定要用到span 才算是后代哟.
使用方法:
.father .box1 span{
/*21*/(这里就是它权重哟)
color:green;
}
(2) 子代选择器(要加上: > 这个符号 )
这里只用到他的儿子,所以这种类型就是子代选择器
使用方法:
.father>.box1{
color:red;
}
注意:设置后,后代也会随着子代改变颜色的哟
(3) 并集选择器( 要加 , 逗号就是 or 的意思)
多个选择器用 , (逗号) 在中间隔开,不然没有效果,一般有共性想才这么设置哟
使用方法:
div,span{
color: red;
}
同时比如在开始建站的时候,网页为更好是使用会设置是样式为例如百度:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd
, ul, ol, li, pre, form, fieldset, legend, button, input,
textarea, th, td {
margin: 0;
padding: 0;
}
(4) 交集选择器( 两个要连着写,就是 and 的意思 )
交集选择器就是同时满足 同一个条件,例如: <span class="sun">alex</span> 这个就是交集选择器
span.sun{
color: #ff6700;
}
3.属性选择器
<p><label for="username">用户名：</label><input type="text" id="username"></p>
<p><label for="pwd">密码：</label><input type="text" id="pwd"></p>
-属性名称匹配 [key]
通过标签内的属性来设置 css 样式 选用是属性的时候要加上中括号:[ ]
使用方法:
[for]{
color:green;
}
-完整匹配 (key=val)
就是把属性和属性的值全部拿下来当时设置 css 样式
使用方法:
[for='username']{
color: red;
}
-以什么开头 (key^=val)
把属性和属性的值全部都拿来设置,但是在属性后面加上 ^
使用方法:
[for^='pw']{
color: green;
}
-以什么结尾 (key$=val)
把属性和属性的值全部都拿来设置,但是在属性后面加上 $
使用方法
[for$="e"]{
color: blue;
}
-包含什么 (key*=val)
把属性和属性的值全部都拿来设置,但是在属性后面加上 *
使用方法:
label[for*="nam"]{
color: yellow;
}
- input[name=xxx]
使用标签里面的属性来 [name=xxx] 来设置他的css 样式
4.伪类选择器
要记住:" 爱恨准则 "
伪类选择器一般使用在 a 链接标签中
<div class="box">
<ul>
<li class="item1"><a href="#">没有被访问</a></li>
<li class="item2"><a href="">访问过后</a></li>
<li class="item3"><a href="">鼠标悬停</a></li>
<li class="item4"><a href="">鼠标摁住</a></li>
</ul>
</div>
(1) 没有访问的样式 :link (显示的颜色的)
在使用是时候 link 前面要加上 :
使用方法:
.box ul li.item1 a:link {
color: #666;
}
(2) 访问过后的样式 :visited (显示颜色的)
使用方法:
.box ul li.item2 a:visited {
color: red;
}
(3) 鼠标悬停的样式 :hover (鼠标悬停在上面显示的颜色) ****这个是常用****
使用方法:
.box ul li.item3 a:hover {
color: green;
}
(4) 鼠标按住的时候 :active (按住鼠标不动时候显示是颜色)
使用方法:
.box ul li.item4 a:active {
color: yellowgreen;
}
5.伪类元素选择器
<body>
<p>egon</p>
</body>
伪类元素的使用就是使用: 标签:方法{ } 有三种: first_letter / before / aftore
(1) 设置第一个首字母发样式 (这里开头字母会突出出来)
使用方法:
p:first-letter{
color: red;
font-size: 30px;
}
(2) 在什么之前 设置样式 这个属性使用不是很频繁,了解就可以了.使用这个伪类选择器 一定要结合content使用
使用方法:
p:before{
content:'alex';
}
(3) 在什么之后 设置样式 (**这个使用的很频繁**) 通常与页面布局的时候, 有很大的关联,结合content使用来 (清除浮动)
使用方法:
p:after{
content:'&';
color: red;
font-size: 40px;
}
三. 继承性和层叠性
1.继承性
就是在设置css的属性,当给父级设置属性的时候,子级就会继承级的属性哟
属性: color font-* text-* line-* 这些属性是可以继承下来的,主要都是文本级的标签
注意: 浮动 绝对定位 固定定位 都是不能被继承的
2.层叠性
这里指就是按照权重大小来决定 权重大就会显示谁的css样式.
主要看的就是用 id 还是类 还是标签来设置: 100 10 1 id 是优先的
四. 盒子型
内边距: padding
边框: border
调整兄弟之间的位置关系: margin
五.块级和行内相互转换
(内行)文本级标签：span、a、b、i、u、em
(块级)容器级标签：div、h系列、li、dt、dd、p(p是文本级标签,但是也属性块级的,特殊标签)
(1)inline 使用方法: 行内转换成块级,一旦给一个块级标签设置css样式 : display: inline;
那么这个块级标签就会变成行内从此不能设置 宽 高 ,同时也可以和其他并排,不在占用一行.
(2)block 使用方法:块级转换成行内,一旦给一个块级标签设置css样式 :display: block;
那么这个行级标签就变成块级标签,独占一行,并且可以设置 宽 高
如果不设置宽 高 就会占一行 ,设置的话就会根据设置来显示哟
(3)inline-block 使用方法: 转换成行内块(两个一起),一旦给一个块级标签设置css样式 :inline-block
那么这个样式就会同时变成 行和块的属性,可以并排,可以设置宽 高
(4) 特殊的行内块级标签:input和img
可以并排,可以设置宽 高
六.浮动
float 就是浮动的意思
有三个值: none(不浮动) left(左浮动) right(右浮动)
1. 浮动的元素脱标
什么叫标准文档流?
- 空白折叠现象
- 高矮不齐,底边对齐
- 自动换行写,一行写不了,就换行
意思就是说设置浮动后,就是脱脱标,不占页面的位置,如果没有设置的话,浏览器就会认为
是脱标文档,所以以网页的第一个位置占位置,脱标的就会压在上面,如果都设置了浮动就会
并排和上下排序,不会覆盖上面,设置浮动后 ,不区分行内、块状元素 都可以改变宽高
2. 浮动的元素互相贴靠
指的是,如果都都设置浮动后,页面宽度不够的话,那么就自己掉行到下面靠边,如果够的话
就是直接互相贴靠在一起哟
3. 浮动的元素由 "字围" 效果
就是指在设置的浮动当中,不会因为浮动的原因而覆盖文字的效果,文字会围绕着设置浮动去块或者行内
进行围绕
4. 收缩的效果
清楚浮动的方法:
- 给父盒子设置高度
给父盒子添加高度一般使用在固定的地方,会用在导航栏方面
clear 就是清除的意思他有三个值:
left :当前元素左边不允许有浮动元素
right:当前元素右边不允许有浮动元素
both :当前左右两边不允许有浮动元素
- clear :both,在浮动元素后,新建一个空的 div 并且这个div 不设置浮动 ,给这个标签设置 clear:both;
使用方法:<div class="clear"></div> 这样设置就会随着改变不会有变化
- 伪元素清楚法(常用****): 必须记住这三句话--> content: "."; clear : both; display: block
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
- overflow：hidden (常用***)
给浮动的元素的父盒子设置,上面的属性
7.margin 相关
(1) 在垂直方向有margin 塌陷现象
在两个兄弟盒子设置垂直方向margin时,那么会以最大的为准,这个就是塌陷
这种情况给两个兄弟何止设置浮动,就不会出现塌陷.
给两个兄弟何止设置浮动,即可解决
(2) margin:0 auto; 水平居中
a. 使用margin:o auto; 必须有 宽 高
b. 只有标准流下的盒子才能使用margin:0 auto; 当一个盒子浮动了
固定定位,绝对定位,margin:0 auto;就不能使用了
c. margin:0 auto;居中盒子.文字水平居中使用,而不是居中文本,文本居中使用text-align: center;
另外一定要要知道,margin属性描述的是兄弟盒子关系,而padding描述的是父子盒子关系
(3)善于使用父亲的padding 而不是margin
8.文本属性
(1) text-align 属性规定元素中的文本的水平对齐方式。
属性值：
center 把文本排列到中间
left 把文本排列到左边
right 把文本排列到右边
justify 实现两端对齐文本效果
(2) text-decoration 属性规定文本修饰的样式
属性值：
none 默认
underline 下划线
overline 定义文本上的一条线
line-through 定义穿过文本下的一条线
inherit 继承父元素的text-decoration属性的值
(3) line-height就是行高的意思，指的就是一行的高度。
(4) text-shadow：水平方向偏移量 垂直方向偏移量 模糊度 阴影颜色；
9.字体属性
(1) 字体大小
font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。
(2) 字体粗细
ont-weight表示设置字体的粗细
属性值：
none(默认值，标准粗细)
bold(粗体)
border(更粗）
lighter(更细)
100~900（设置具体粗细，400等同于normal，而700等同于bold）
inherit（继承父元素字体的粗细值）
(3) vertical-align 属性设置元素的垂直对齐方式。
该属性定义:行内元素的基线相对于该元素所在行的基线的垂直对齐
常用属性值：*****
baseline 默认值
top
bottom
middle
它的作用：
内联元素之间的对齐
文字与图片垂直方向的对齐
图片与图片垂直方向的对齐
行内块元素垂直方向的对齐
单元格td的内容垂直方向的对齐
10.定位
(1) 相对定位 position:relative;
就是相对自己原来的位置定位
现象于使用:
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子没什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
特性:
不脱标 形影分离 占位
注意:对页面没有什么太大用处,影响页面布局,不要用来做压盖效果
一般使用在 微调元素位置,做绝对定位的参考 ,参考点就是原来位置做参考点
(2) 绝对定位 position:absolute;
脱标 做遮盖效果,提高层级,这是绝对定位后,不区分行内和块级元素,都可以设置宽 高
a. 参考点(重点)：
单独一个绝对定位的盒子
1.当我使用top属性描述的时候 是以页面的左上角（跟浏览器的左上角区分）为参考点来调整位置
2.当我使用bottom属性描述的时候。是以首屏页面左下角为参考点来调整位置。
b. 以父辈盒子作为参考点
1.父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角为参考点，这个父辈元素不一定是爸爸，它也可以是爷爷，曾爷爷。
2.如果父亲设置了定位，那么以父亲为参考点。那么如果父亲没有设置定位，那么以父辈元素设置定位的为参考点
3.不仅仅是父相子绝，父绝子绝 ，父固子绝,都是以父辈元素为参考点
注意了：父绝子绝，没有实战意义，做站的时候不会出现父绝子绝。因为绝对定位脱离标准流，影响页面的布局。相反‘父相子绝’在我们页面布局中，是常用的布局方案。因为父亲设置相对定位，不脱离标准流，子元素设置绝对定位，仅仅的是在当前父辈元素内调整该元素的位置。
还要注意，绝对定位的盒子无视父辈的padding
作用：页面布局常见的“父相子绝”，一定要会！！！
(3) 固定定位 position:fixed;
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用：
1.返回顶部栏 2.固定导航栏 3.小广告
11.z-index
(1) 这个东西非常简单，它有四大特性，每个特性你记住了，页面布局就不会出现找不到盒子的情况。
z-index 值表示谁压着谁，数值大的压盖住数值小的。
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，
都可以使用z-index，而浮动元素不能使用z-index。
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，
或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
(2) 从父现象
如果父亲就已经小了,儿子就算这设置值再大都都没有用的.