小艾的CSS3笔记
本文最后更新于:2020年9月22日 晚上
css是在<head></head>
之间写入的
css引入样式有三种,分别是:
- 内部样式表:
把CSS全部写到html内部,也就是中 - 行内样式表:
适合修改一些简单样式,不是特别多的修改
直接在标签上面修改<div style="color: pink;">xxxxxxxxxxx<div>
- 外部样式表:
适合样式特别多的情况,单独建一个CSS文件<link rel="stylesheet" href="css文件路径">
css是由两部分组成的:
- 选择器以及一条或者多条声明
- 选择器是用于指定css样式的HTML标签,花括号是对该对象设置的具体样式
- 属性和属性值以键值对出现,属性和属性值之间用“:”分开,以“;”结尾
- css基础选择器是由单个选择器组成的包括:
(1)标签选择器=====以标签名作为选择器
标签名{属性:属性值;}
(2)类选择器=====单独选择一个或者几个
.类名{属性:属性值;}
需要用class来调用<div class="类名">
(3)id 选择器====只能调用一次
#id名{属性:属性值;}<div id="id名">
(4)通配符选择器
*{属性:属性值;} 可以把所有的标签都改变
复合选择器:由两个或者更多的基础选择器组合而成的,包括:
后代选择器,子代选择器,并集选择器,伪类选择器
- 后代选择器(重要) :
元素1 元素2{样式xxxxxx}=======元素2必定是元素1 的孩子
- 子代选择器:
只能选择作为某元素的最近一级子元素元素1>元素2 {样式xxxxx}
- 并集选择器:
可以选择多组标签,同时为他们定义相同的样式1
2
3p{
xxxxxxxxxx
} - 伪类选择器:
1
2
3
4
5给链接添加特殊效果
a:link (选择所有未被访问过的链接)
a: visited (选择所有已经被访问过的链接)
a:hover (选择鼠标指针位于起上的链接)
a:active (选择活动链接,鼠标正在点着的,还没有放开的) - focus 伪类选择器
1
2
3用于选取获得光标的表单元素
input :focus
{bg-color:pink}
CSS字体属性
字体:标签 { font-family :”微软雅黑”;}
字体大小: 谷歌默认显示:16px,px(像素)大小是我们网页最常用的单位
P{ font-size :20px;}对齐文本—–只能是水平对齐
1
2div
{text-align:center}文本缩进
1
2
3
4
5
6
7
8text-index /*给首行进行缩进*/
div {
text-indent:19px;
}
em是一个相对单位,就是相对于当前元素的一个文字的大小
div {
text-indent:2em
}行间距——文字和文字行之间的距离
1
2
3p{
line-height: 26px
}
HTML元素一般分为 块元素和行元素
*块元素
<h1></h1>,<p>,<div>,<ul>,<ol>,<li>
等等
特点:
- 独占一行
- 可以设置高度宽度,以及内外边距
- 是一个容器以及盒子,里面可以放行内或者块级元素
注意:文字类的元素内不能使用块级元素
例如<p>
里面不能放<div>,<h1>~~~~<h6>
等都是文字类块级标签,里面也不能放其他块级元素
*行内元素
<a>,<strong>,<b>,<em>
等等
特点:
- 相邻行内元素在一行上,一行可以显示多个
- 宽和高直接设置是无效的
- 默认宽度就是本身内容的宽度
- 行内元素只能容纳文本或者其他行内元素
注意:链接里面不能再放链接了,特殊情况下<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全
*行内块元素
同时具有块级元素和行内元素的特点,<img/>,<input/>,<td>
特点:
- 一行可以显示多个
- 可以设置宽和高以及边距
*元素显示模式转换
display:block ; =====行内元素转换为块链接 display:inline; =====块元素转换为行内元素 display:inline-block; =====转换为行内块元素背景图像固定(背景附着)
backfground-attachment : scroll 滚动 /fixed 固定背景复合写法
背景颜色 背景图片地址 背景平铺 背景图像滚动 背景 背景位置
background: black url(url) no-repeat fixed center top背景颜色半透明
background :rgba(0,0,0,0.3)
最后一个参数是透明度大小,区间是0~1;
重点
css的三大特性
- 层叠性
样式冲突:遵循就近原则,以最后的为准,覆盖掉前面的
样式不冲突,不会层叠 - 继承性
css中的继承:子标签会继承父标签的某些样式,如文本颜色和字号(text- ,font- ,line- ,元素开头的以及color)
行高的继承:如果行高没有带单位,就是当前元素文字大小的n倍 - 优先级
当同一个元素指定多个选择器,就会有优先级的产生
选择器如果相同,则执行层叠性
如果是复合选择器,则会由权重叠加
css盒子模型
- 盒子模型的组成
border 边框
content 内容
padding 内边距
margin 外边距
边框
组成:边框粗细 ,边框样式,边框颜色
边框的复合写法:
border:1px solid red; 没有先后顺序 边框可以分开写: border-top;或者 border-left; 或者 border-bottom; 或者 border-right; 如果只需要改一条边框,可以利用层叠性来改变 表格的细线边框 border-collapse:collapse; 表示相邻的边框合并在一起 边框会影响盒子实际大小内边距
padding属性用于设置内边距
padding-left: 20px 左边距 等等
复合写法:
- padding: 5px; 代表上下左右都是5像素
- padding: 5px 10px; 代表上下边距是5像素 左右内边距是10像素
- padding:5px 10px 20px ; 代表上边距5像素 左右边距10像素 下边距20像素
- padding :5px 10px 20px 30px; 代表上是5像素 右边距10像素 下是20像素 左是30像素
如果一个盒子本身没有指定width /height属性,padding则不会挤开盒子
外边距
盒子和盒子之间的距离:
margin-left
margin-right
margin-top
margin-bottom
margin的复合写法和padding的一样
*外边距可以让块级盒子水平居中,但是必须满足两个条件:
- 盒子必须指定了width
- 盒子左右的外边距都设置为auto
margin:auto;
margin: 0 auto;
margin-left:auto;margin-right:auto;
行内元素或者行内块元素水平居中给其父元素添加text-align: center就可以了
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!