前端复习笔记(二)——CSS
前端复习笔记(二)——CSS
CSS样式
概述
- CSS: Cascading Style Sheets 层叠样式表
- 内容和样式相分离，便于修改样式
- 每个声明最后要加上分号最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号
- 为了使用样式更加容易阅读，可以每条代码写在一个新行内
添加方法
行内
eg:
<p style="color:red;">emmmm
</p>
内嵌
- 即使有公共css代码，也是每个页面都要定义的
- 适合文件很少，CSS代码也不多的情况
- 页面太多，不易维护
<html><head><style>p{color:red;}</style></head>
</html>
外部样式
单独文件
引入:
<link rel="stylesheet" href="xxx.css"/>
优先级
行内>内嵌>外部样式
选择器
标签选择器
p{...
}
html,body{....
}
类别选择器
css：
.box1{...
}
.box2{....
}
html:
<div class="box1">...
</div>
<div class="box2 box1"></div>
ID选择器
#box1{...
}
<div id="box1"></div>
其余声明
- 集体声明
hq,p{...}
- 全局声明
*{...}
文字样式
颜色
| red,blue… | 颜色名 |
|---|---|
| rgb(x,x,x) | rgb值 |
| rgb(x%,x%,x%) | rgb百分比值 |
| rgba(x,x,x,x) | rgb值+透明度 |
| #rrggbb | 十六进制数，eg：红色:#ff0000 |
文本
字符间距 letter-spacing
h1{letter-spacing:2px}
h2{letter-spacing:-2px}
行高line-height
h3{line-height:2em}
对齐方式text-align
.box{text-align:center|right|justify}
装饰线 text-decoration
h1{text-decoration:overline(上划线)|line-through(中划线)|underline(下划线)|none(删除装饰)}
字体 font
- font: 字体的所有属性
- font-family: 字体
- font-size : 字号
- font-style: 斜体
- font-weigh: 字体粗细
所有
| 属性 | 描述 |
|---|---|
| color | 设置文本颜色 |
| direction | 设置文本方向。 |
| letter-spacing | 设置字符间距 |
| line-height | 设置行高 |
| text-align | 对齐元素中的文本 |
| text-decoration | 向文本添加修饰 |
| text-indent | 缩进元素中文本的首行 |
| text-shadow | 设置文本阴影 |
| text-transform | 控制元素中的字母 |
| unicode-bidi | 设置或返回文本是否被重写 |
| vertical-align | 设置元素的垂直对齐 |
| white-space | 设置元素中空白的处理方式 |
| word-spacing | 设置字间距 |
背景与超链接
背景属性
background: 背景所有属性 (颜色 图片 repeat)
background-color: 背景颜色
**background-image:url("")**背景图片
background-repeat: repeat|repeat-x| repeat-y | no-repeat
- 是否重复
超链接
:伪类选择器
- a:link 普通未被访问的链接
- a:visited 用户已访问的链接
- a:hover 用户指针位于链接的上方悬停
- a:active 链接被点击的时刻
a:link{....
}
列表与表格
列表List
- list-style: 所有用于列表的属性设置的声明
- list-style-image: 为列表项设置图像
- url("")
- list-style-position: 标志的位置
- inside
- outside
- list-style-type: 标志的类型
- none 无标记
- disc 默认，实心圆
- circle 空心圆
- square 实心方块
- decimal 数字
- lower-roman 小写罗马数字
- upper-roman 大写罗马数字
- lower-alpha 小写英文字母
- upper-alpha 大写英文字母
- lower-Greek 小写希腊字母
- lower-latin 小写拉丁字母
- upper-latin 大写拉丁字母
表格
- width:…
- height:…
- border: 2px soild #ff0000
- border-collapse
奇偶选择器:nth-child(odd|even)
CSS布局与定位
概述
盒子模型
- 页面元素的大小
- 边框
- 与其他元素的距离
定位机制
- 文档流
- 浮动定位
- 层定位
盒子模型
- overflow属性: 当内容溢出盒子时
- hidden:超出部分不可见
- scroll:显示滚动条
- auto:如果有超出部分，显示滚动条
- border属性:
- border-witdh:px,thin,medium,thick
- border-style:dashed,dotted,solid,double
- border-color:颜色
- border:width,style,color
边距
| 外边距 | 内边距 | 组成 |
|---|---|---|
| margin | padding | 上右下左 |
| margin-left\right\top\bottom | padding-left\right\top\bottom | … |
div{margin:1px 2px 3px 4px;}
- margin的合并:垂直方向合并，水平方向不合并
- **div水平居中:**margin: 0 auto 浏览器自动计算
CSS定位
文档流 flow
浮动 float
层 layer
文档流
block
- 独占一行
- 元素的height,width,margin,padding都可设置
- block元素
<div>,<p><h1>-<h6>,<ol><ul><table><form>
a{display:block
}
将元素显示为block元素
inline元素a转换为block元素，从而使a元素具有块状元素特点
inline
- 不单独占用一行
- width,height不可设置
- width就是它所包含的文字或图片的宽度，不可改变
- inline元素间存在间距问题
- 常见inline元素
<span><a>
div{display:inline
}
将元素显示为inline
inline-block
- 同时具备inline元素，block元素的特点
- 不单独占用一行
- 元素的height,width,margin,padding都可设置
- 常见的inline-block:
<img>
div{display:inline-block;
}
none
float浮动定位
- 属性:left,right,none
- left 左浮动
- right 右浮动
- None 不浮动
- clear属性: left,right,both
- 清除浮动
层定位
position属性
- fixed 固定定位
- 相对于浏览器窗口进行定位
- relative 相对定位
- 相对于其直接父元素进行定位
- absolute 绝对定位
- 相对于static定位以外的第一个父元素进行定位
- 属性有效
- static 默认值
- 没有定位，top,bottom,left,right,z-index 无效
CSS3
圆角边框与阴影
圆角边框border-radius
- border-top-left-radius: 左上角
- border-bottom-left-radius: 左下角
- border-top-right-radius: 右上角
- border-bottom-right-radius: 右下角
阴影box-shadow
box-shadow:inset 水平偏移 垂直偏移 模糊距离 颜色
inset(可选,内部阴影)|outset(默认值,外部阴影)
文本与文字
text-shadow属性
text-shadow:水平偏移 垂直偏移 阴影大小 颜色
word-wrap属性
允许长单词,url强制换行
- break-word 允许单词换行
- normal 不换行
@font-face规则
@font-face{font-family:字体的名字;src:url('xxx.ttf'),....url('xxx.eot');
}
p{font-family:引用字体名字
}
2D变换
transform属性
对元素进行旋转、缩放、移动、拉伸
- rotate()
- 数字+deg 旋转的角度
- scale(x,y)
- 缩放的大小
#box{transform:rotate(300deg)
}
过渡与动画
过渡 transition属性
- transition
- 属性名 持续时间 过渡方法
- transition-property
- 属性名|all 对哪个属性进行变化
- transition-duration
- 持续时间
- transition-timing-function
- 过渡使用的方法(函数)
- linear 匀速
- ease 慢快慢
- ease-in 慢快
- ease-out 快慢
- ease-in-out 慢快慢
- transition-delay
anamation 动画
@keyframes my1(动画名字)
{...
}
div:hover{animation:my1 5s linear
}
- animation 简写
- animation-name 引用动画的名称
- animation-duration 动画完成时间
- animation-timing-function 规定动画的速度曲线，默认ease
- animation-play-state running|paused
3D变换
transform-style:preserve-3d
- rotateX(2deg) X轴旋转
- rotateY(3deg) Y轴旋转
- rotateZ(4deg) Z轴旋转
- perpective 透视
前端复习笔记(二)——CSS相关推荐
- c++语言自定义操作符,C++语言复习笔记二
C++语言复习笔记二 零.OOP 特征:抽象-封装-继承-多态 一.自定义数据类型 1.类 class 类名 { private: 私有成员(本类) public: 公共成员(所有) protecte ...
- 第四次网页前端学习笔记（css）
学习网址:[优极限] HTML+CSS+JavaScript+jQuery前端必学教程,小白教学,前端基础全套完成版_哔哩哔哩_bilibili 一.css的属性 是否重复: 1.rep ...
- 个人前端学习笔记 html5+css（保持更新）
2022年7月5日 HTML基础知识 一.路径的使用 1.绝对路径的使用:表示含有盘符的路径地址==-不建议在服务器(工作)中使用== -补充:插件的名字:Image preview(在编辑器代码前显 ...
- 前端学习笔记之CSS网页布局
CSS网页布局 阅读目录 一 网页布局方式 二 标准流 三 浮动流 四 定位流 一 网页布局方式 #1.什么是网页布局方式 布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式,比如wor ...
- 前端学习笔记 - HTML+CSS
基础认知 网页 什么是网页 网站是指在因特网上根据一定的规则,使用 HTML 等制作的用于展示特定内容相关的网页集合. 网页是网站中的一"页",通常是 HTML 格式的文件,它要通 ...
- 前端学习笔记之CSS属性设置
CSS属性设置 阅读目录 一 字体属性 二 文本属性 三 背景属性 四 盒子模型 五 盒子模型各部分详解 一 字体属性 1.font-weight:文字粗细 取值 描述 normal 默认值,标准粗细 ...
- 前端菜鸟笔记 Day-5 CSS 高级
文章大纲来源:[Day 5]CSS 高级 CSS 选择器 CSS 拓展 CSS 单位 CSS 参考手册 CSS 选择器 内容引用:CSS 选择器 元素选择器 html { ... } 复制代码 选择器 ...
- Webpack4 学习笔记二 CSS模块转换
前言 此内容是个人学习笔记,以便日后翻阅.非教程,如有错误还请指出 webpack 打包css模块 webpack是js模块打包器, 如果在入口文件引入css文件或其它的less.sass等文件,需要 ...
- 前端学习笔记：CSS学习之选择器篇
一.初识选择器 1.语法: 选择器{/* 注意添加";" */样式; } exp: body {font-size: 12px;color: red;} 二.标签选择器 标签选择器 ...
- 前端学习笔记 - 用CSS实现一个背景色为红色，半径为200px的圆，并设置不停的上下移动动画
返回目录 一.DOM <body><div class="box"></div> </body> 二.CSS <style&g ...
最新文章
- less里面calc() 语法
- 3、顺序表、内存、类型、python中的list
- ABAP代码检查的注意事项有哪些
- saltstack 主题说明
- bcp+Sql语句抽取数据导出
- ubuntu 自动挂载工具_Ubuntu设置开机自动挂载所有格式硬盘分区
- PHP错误处理注册机制
- PDFEdit编辑器使用教程为PDF增加封面
- C# 实现多种语言切换，通过VS实现
- 从0开始——CAD与Tekla开发入门
- 数电模电基础（1）分压电路
- SOLIDWORKS之VBA宏(三)
- Vue.js(二) 模板语法
- stm32外设的使能，失能，复位的区别
- 解决IE浏览器没有网络的情况
- Pandas——数据清洗1
- 前端写代码的推荐工具
- 小老弟3.6研发面筋大汇总
- 微信搜一搜将开放搜索入口给搜狗搜索
- 论文阅读——利用Inceptioin V3在PET上进行AD预测