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 :both,在浮动元素后,新建一个空的 div ,给这个标签设置 clear:both;
- 伪元素清楚法(常用****):
.clearfix:after {
content: '.';
clear: both;
display: block;
height: 0;
visibility: hidden;
}
- overflow：hidden (常用***)
给浮动的元素的父盒子设置,上面的属性