【web】WEB开发技术基础知识整理(2)

WEB开发技术基础知识整理(2)

第二部分——CSS

简介

  • css被称作层叠样式表。
  • 让网页结构和样式分离
  • 将HTML文档的表现与内容分离
  • 使HTML文档结构简化、清晰、灵活
  • 极大的提高了HTML文档的可读性
  • Cascading使样式结构简化、清晰、灵活
  • 增强了网站全局的一致性
  • CSS文件存储在浏览器的高速缓存中,多个页面
  • 必重新装载分析样式,降低网络数据传输
  • 便于针对不同设备目标定制不同的样式
  • 为视觉障碍者提供帮助

使用方式

  • CSS 规则由两部分构成:选择器,以及一条或多条声明。
h1{color:blue;
/*这是一条注释*/
font-size:12px}

选择器

id选择器

根据元素里面的id属性值进行选择
类似于#id1
####类选择器
.class 根据属性class进行选择,可以是一个组
例如h3.green

组合选择器
  • 后代选择器:元素内所有符合第二级选择的元素
  • 子选择器:元素内所有符合第二级选择器的,直接子元素
伪类
  • :hover 悬浮
  • :nth-child(odd/even)奇数偶数元素
  • :invalid 未通过验证
  • 一个元素可以层叠样式

实例:links

  • :hover (放到link和visited之后有效)
  • :visited
  • :link
  • :active(hover之后有效)
  • padding(框长宽)
    ####允许多个元素同时选择
    a,p,h1{}
    ####属性选择器
    a[target]选择a中的target元素

###如何使用

  • 外部样式表,外部css文件
  • 内部样式表,内部单独开辟style标签
  • 内联样式表,在元素标签内部添加style属性
  • 优先级,内联样式 > 内部样式表 > 外部样式表
  • 层叠顺序(低–高):缺省设置,外部,内部,内联
  • 必须按照正确顺序加载css(例如先bootstarp,后基于bs的ui,最后自定义样式)

颜色

rgb(255,55,0)
或者#ff0000

元素

  • 尺寸表示:em,相对于当前元素应有尺寸,用于 缩进
  • rem相对于html字体尺寸
  • %相对于父容器百分比
  • px相对于逻辑像素,相对的绝对单位
  • 字体属性建议使用em,rem
  • 元素布局建议使用px%

容器

  • 外到内:margin,border,padding,content
border
  • border-style 线条样式 必须
  • border-width 宽度(5px,medium,thick(顺序上右下左)
  • border-radius 弧度
  • border-(top,right,bottom,left)-style 边样式
  • border-color 颜色
h1{
    color:blue;
font-size:12px;
background-color:#000000;
border-bottom:6px solid red;
}
padding
  • Padding,内边距,决定了内容至边线的距离;
  • 元素背景颜色决定开空间颜色
margin
  • 外边距,元素边线到其他元素的距离
  • 颜色由父亲容器决定
  • 无法定义颜色
  • 若margin:auto时,可实现动态变化
  • 两边的margin会取最大值

background

  • background-color
  • background-image
  • background-repeat 重复定义
  • background-position 图片位置
  • background-attachment 背景不动

text

  • color
  • opacity透明度
  • text-align 对齐方式
  • text-indent 缩进?
  • text-decoration (overline,line-through,underline,none)
  • text-transform uppercase,lowercase,capitalize
  • letter-spacing 字母间距
  • line-height 行间距

font

  • font-family:字体
  • font-style:字体样式,倾斜,正常
  • font-size:大小
  • font-weight:normal,lighter,bold,900 字体粗细

list

  • list-style-type 样式
  • list-style-image 图片
  • list-style-position 外部还是内部,默认外
  • ul内边距与li外边距

table

  • border
  • border-collapse 内部线是否存在
  • Th,默认字体加粗居中对齐,Td,默认字体左对齐
  • 在tr中声明内/外边距,字体等无效;必须声明在td中

一些转换

  • li转换成inline级可以横向排列
  • span转成block级别可以占用一整行
  • display: none; 元素不存在,不占用布局空间
  • visibility: hidden;元素存在不可见,仍占用布局空间
  • Inline元素,纵向内/外边距无效,横向有效;高宽无效;但可与其他元素同行显示
  • Block元素,内外边距,高宽均有效;但无法与其他元素同行显示
  • display=inline-block;对外inline,对内block,同行显示并设置高度
  • overflow 显示 visible溢出部分不截断,留在外边 hidden溢出截断 scroll 溢出部分截断其他为滚动条 auto基于内容长度绝对显示滚动条
  • float 只能左右不能上下,当浮动元素高度超过父容器时,可设置属性使父容器计算浮动元素尺寸,父容器将在浮动元素定位布局后绘制。

页面定位

  • 默认按照页面流程定位,top等无效
  • relative 可以使用
  • absolute 相对的绝对定位
  • fixed相对浏览器位置固定

flex容器弹性布局

  • 必须声明弹性容器(flex container),display属性设置为flex
  • 弹性项,具有弹性的,类似inline-block的特性
  • flex-direction j决定主轴方向 row默认横向,,column纵向
  • flex-wrap 决定是否换行
  • flex-flow(组合)
  • justify-content 主轴对齐方法
  • align-items 纵轴对齐方式
  • align-content

子元素

  • order
  • flex-grow 确定宽度后占用剩余宽度比重
  • flex-shrink 缩小比重,用于固定尺寸
  • flex-basis 确定宽度前的初始长度
  • flex
  • align-self 纵轴对齐方式

nav列表元素

  • list-style-type:none 取消列表样式
  • width:确定最佳宽度
  • display:block
  • text-decoration:none取消下划线

附加:html5布局

<header>
<nav>
<main>
<aside>
<article>
<footer>
<section>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

kfzjw008

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值