学习笔记-CSS(1)

CSS注释

/* 注释内容 */

字体样式属性

font-size 字号大小

px 像素

font-family 字体

分号包裹、逗号隔开

CSS Unicode字体

字体可以为汉字、英文,也可使用汉字的Unicode编码

font-weight 字体粗细

让加粗的不加粗

可选值备注
normal默认值
bold加粗
bolder更粗
lighter
100~900(100整数)400等价normal,700等价bold

font-style 字体风格

<em>的不倾斜

可选值备注
normal默认值
italic斜体

font 简写

d{
    font:font-style font-weight font-size/line-height font-family;
}

必须按照顺序;必须保留font-size和font-family

选择器

  • 标签选择器

HTML标签名作为选择器

htmlname{}
  • 类选择器

class属性作为选择器

.classname{}
  • 多类名选择器

html引用多个class样式

  • id选择器

id属性作为选择器

#idname{}
  • 通配符选择器

    *{}
  • 伪类选择器

    :name{}
    • 链接伪类选择器

      <a></a>
      • a:link 未访问
      • a:visited 访问过
      • a:hover 鼠标移动到链接上
      • a:active 选定的链接

      不能调换顺序

    • 结构伪类选择器

      • :first-child 首个子元素
      • :last-child 最后一个子元素
      • :nth-child(n) 第n个孩子

        • n 可以为数字
        • even偶数;odd奇数
        • n 全部(0-n);2n(0 2 4 2n);2n+1(1 3 2n+1)
      • :nth-last-child(n) 从最后一个孩子开始数
    • 目标伪类选择器

      • :target 选定状态

外观属性

color 文本颜色

  1. 预定义的颜色
  2. 十六进制
  3. RGB代码

line-height 行高

段落中行和行之间的距离

一般设置比字体大7 8 像素

如果需要垂直居中,设置行高为盒子高度

text-align 水平对齐方式

left/center/right

text-indent 首行缩进

建议使用em做单位,1em为一个字的宽度

text-decoration 装饰

为 none 可以取消 a 的下划线

letter-spacing 字间距

字符间的距离

word-spacing 单词间距

对英文单词有效。中文无效。

颜色半透明 css3

color: rgba(r,g,b,a) /*a 0~1 透明度*/

文字阴影 css3

text-shadow:水平位置(必) 垂直位置(必) 模糊距离 阴影颜色;

day2

书写位置

  • 内部样式表
  • 行内样式
  • 外部样式

标签显示模式(display)*

块级元素

独占一行或多行,可以设置宽度高度,用于布局

常见的块元素有

h1~h6
p
dib
ul
ol
li
...

特点:

  • 总是从新行开始
  • 可以设置高高度、行高和内外边距
  • 默认宽度100%
  • 可以容纳内联元素和其他块元素

行内元素

不占有独立的区域,仅仅靠自身字体大小和图像尺寸来支撑结构,一般不可以设置宽高对齐等属性

span

  • 和相邻行内元素共享
  • 无法设置宽高,水平padding和margin可以设置,垂直无效
  • 默认宽度是它本省内容宽度
  • 行内元素只能放文本和其他行内元素。(a特殊)
  • 链接里不能再放链接
  • 只有文字才能组成段落,文字类块级标签不能再放块元素

行内块元素

img input td 可以设置宽高和对齐属性。但是不独占一行

特点:

  • 和相邻行内元素在一行上,但是会有空白间隙
  • 默认宽度是它本身内容的宽度
  • 高宽,边距都可以设置

模式转换

设置display

块>行:inline

行>块:block

块行>行内块:inline-block

CSS复合选择器

交集

第一个为标签,第二个为class选择器,无空格

并集

任意形式的选择器,逗号隔开

后代(可以选择所有后代)

外层选择器在前面,空格隔开

子元素(只会选择儿子)

大于号连接

属性选择器

a[属性] /*包含属性*/
a[属性=值] /*属性等于值*/
a[属性^=值] /*属性为值开头*/
a[属性$=值] /*属性为值结束*/
a[属性*=值] /*属性包含值*/

伪元素选择器 css3

插入一个行内元素元素,可指定样式。

: 伪类
:: 伪元素
p::first-letter 第一个字
P::first-line 第一行
p::selection 被选择
在盒子的内部前后插入一个伪元素
div::before{
    cotent: neirong
}
div::after{
    content: neirogn
}

背景

背景颜色

background-color

背景图片

background-image

图片显示在颜色上

平铺

background-repeat

背景位置

background-position

方位名词 坐标 混搭

背景附着

background-attachment: fixed/scroll

简写

background: 无顺序

背景透明 css3

backgound:rgba(r,g,b,a)

背景缩放 css3

backgound-size 设置背景图片尺寸

px/百分比

尽量只改一个值,防止图片扭曲

cover 自动缩放比例,溢出部分隐藏,图片保证宽高同时满足

contain 自动缩放,保证图片完整,宽高一个满足就不再缩放

多背景 css3

每组背景逗号隔开,前面的覆盖在后面的背景上

day3

css三大特性

层叠

  1. 样式冲突,就近原则
  2. 样式不冲突,不会层叠

继承

text-、font-、line-、color属性会被继承

优先性

选择器有权重(特殊性公式)

标签选择器 0,0,0,1

类选择器,伪类选择器 0,0,1,0

id选择器 0,1,0,0

行内选择器 1,0,0,0

!important 无穷大

权重叠加

复合选择器权重是叠加计算的

继承为0

子元素继承为0

盒子模型

边框

border:bordre-width||border-style||border-style

border-style: nonesoliddasheddotteddouble

表格的细线边框

设置td border-style:solid border会叠加

border-collapse: collapse 相邻合并

圆角边框 css3

border-redius 值复制(左上 右上 右下 左下)

内边距

padding

边框和内容的距离

值复制

外边距

margin 与内边距一致

实现居中对齐

块级有宽度元素设置左右外边距为auto 居中

img与背景图片的区别

img标签是行内块元素,可以设置宽高,使用内外边距改变距离 占位置

背景图片使用background-size和background-position设置 不占位置

清除默认内外边距

通配符 margin:0 padding 0

行内元素只能设置左右边距

外边距合并

垂直相邻块元素外边距合并以最大的为准

嵌套元素外边距合并:

  • 解决方案: 定义父元素合并边框的边框和内边距
  • 添加overflow:hidden

content宽度和高度 **

空间尺寸:width/height+border+padding +margin

盒子尺寸:width/height+padding+border

! padding不影响盒子尺寸的情况:如果盒子没给定宽度高度或者块级元素继承了父元素的宽高,padding不会影响 尺寸。

day4

盒子模型 布局稳定性

width>padding>margin

  1. margin会有外边距合并
  2. padding会影响盒子大小
  3. width没有问题

CSS3盒模型

box-sizing用于指定盒模型

content-box: 以前的盒模型 w3c推荐 padding border会撑开盒子

border-box: padding border不撑开盒子

border-box 盒子宽度就是宽度

盒子阴影

文字阴影: text-shadow 水平 垂直 模糊距离 颜色

盒子阴影 box-shandow 水平 垂直 模糊距离 影子大小 颜色 内外(inset 内、 外不写)

浮动

普通流

块级元素自上问下,独占

行内元素前后排列

浮动

开始的时候,浮动用来做文字环绕效果。

浮动飘离标准流不占位置,会遮盖标准流。只有左右浮动。

!浮动首先需要添加标准流父级元素。浮动元素总是会找到离他最近的父级元素对齐,不会超出内边距。

一个父盒子里的子盒子,如果一个浮动,其他都需要浮动才能一行对齐。

添加浮动后,会有行内块的元素特性,可以设置大小对齐

行内块:内容撑开盒子

布局

版心 width通常为960px

一列固定宽度且居中

两列左窄右宽

通栏平均分布

清除浮动

清除浮动后造成的影响

考虑孩子高度会变,父级盒子可以不给高度,这时孩子浮动,父元素内部高度为0

属性:clear

方法:

  1. 额外标签法
  2. 父级添加overflow属性方法

    1. overflow:hidden 触发BFC
  3. 使用after伪元素清除浮动

    1.    .clearfix:after{
             content:'.';
             display:block;
             height: 0;
             visibility: hidden;
             clear: both;
  4. 使用before和after双伪元素清除浮动

    1.    .clearfix:before,.clearfix:after{
             content:"";
             display:table;

    .clearfix:after{

       clear:both;

    }
    .clearfix{

       *zoom:1;

    }

Photoshop

颜色填充:

alt+delete:前景色

ctrl+delete:背景色

套索工具:

魔法棒:

ctrl+shift+i 选区反选

ctrl+d 取消选区

钢笔:

alt+右键 取消曲线

ctrl+enter 确认选取

day5

定位

边偏移

top right left bottom

定位模式

position

  • static

    • 静态定位
    • 无法通过边偏移改变位置
    • 一般用来清除定位
  • relative

    • 相对定位
    • 相对原来的位置左上角(忽略padding)进行移动
    • 原来的位置继续占有(标准流,相对定位不脱标)
  • absolute

    • 绝对定位

      • 如果父级没有定位,相对于文档左上角(忽略padding)定位,原来的位置不再占有
      • 父级有定位,根据父亲左上角(忽略padding)定位
    • 脱离标准流,不占有位置

子绝父相

  • fixed

    • 固定定位
    • 父亲定位没影响,只认浏览器
    • 完全脱标
  • z-index

    • 调整层叠顺序
    • 默认为0
    • 只有相对定位,绝对定位,固定定位有该属性,标准流、浮动、静态定位都没有该属性

定位模式的转换

添加绝对定位和固定定位会自动转换为行内块元素

元素的显示与隐藏

display显示

display:none 隐藏元素,不保留位置。没有删除

display:block 转换为block,显示元素

visbility隐藏

visbility:hidden 隐藏元素保留位置

visbility:visable 显示元素

overflow 溢出

visible: 默认 超出显示

hidden: 超出隐藏

scroll: 一直显示滚动条

auto: 超出 显示滚动,不超 不显示

CSS用户界面样式

鼠标样式

cursor:default pinter move text

轮廓

outline 类似边框,显示在边框外

一般将outline设为0

防止拖拽文本域textarea

resize:none

vertical-align 垂直对齐

对块级元素无效。

给图片表单加上该属性,使文本和图片、表单 对齐

baseline基线对齐

top顶线对齐

middle中线对齐

bottom底线对齐

图片和文字默认基线对齐

行内块元素会使用底线与父盒子的基线对齐

解决方法:

  1. img转换为block
  2. 更改img垂直对齐

文字溢出

word-break 换行

normal 默认规则

break-all 允许单词拆开分行

keep-all 只有在半角空格( )或连字符(-)换行

针对英文

white-space

normal 默认

nowrap 强制一行显示

text-overflow 文字溢出

首先强制一行内显示,再使用该属性。

clip 裁剪 不显示省略号(...)

ellipsis 裁剪超出用 省略号(...)代替

CSS精灵(sprite)技术

网页背景图处理方式

将零星的小背景图片集中在一张大图里。

使用background-position移动

字体图标

滑动门技术

背景图根据内容拉长缩短

精灵+padding

http://weixin.qq.com 导航栏效果

div>a>span

过渡

transition: 为 状态a->状态b 补充动画 与hover配合使用

property 要过渡的属性

duration 花费时间必须写单位(s)

timming-funtion 运动曲线 默认ease

linear 线性 v恒定

ease 逐渐慢下来

ease-in 加速

ease-out 减速

ease-in-out 先加速后减速

delay 何时开始 默认0

transation放在div而不是div:hover中,否则回去无过渡

多阶段变化 ',' 隔开,多属性一起变化,属性填 all

2D变形 tansform

结合transation实现动画。

  • translate(x,y) 平移

    • translateX(x)
    • translateY(y)

定位盒子居中完美解决方案

移动距离如果是%,那么以自己的宽高为准

left: 50%;
top: 50%;
transform: translate(-50%,50%);
  • 缩放scale(x,y)

    • scaleX
    • scaleY

scale默认值为1 scale属于[0.01,0.99]缩小,否则变大

  • 旋转rotate(deg)

    • deg为度,+值顺时针,-值逆时针
    • 设置旋转中心点

      • transform-origin(x,y)

        • top|bottom|center|num
        • left|right|center|num
      • 需要设置在变化之前
  • 倾斜skew(deg,deg)

3D变形 tansform

  • 旋转

    • rotateX(deg)沿x轴立体旋转
    • rotatey(deg)沿y轴立体旋转
    • rotatez(deg)沿z轴立体旋转
    • backface-visiblity:hidden 正面反转隐藏
  • 3D移动

    • 透视(perspective)
    • tanslateZ(z)

perspective是眼睛到屏幕的距离

tranlateZ是物体到屏幕的距离 Z

z只能是px

  • tranlate3d(x,y,z)

动画 animation

简写

animation:动画名称 时间 运动曲线 何时开始 播放次数 是否反方向;
animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction

infnite 无限循环

@keyframes 动画名称{
    from|0%{
        /* transform */
    }
    ?%{
        
    }
    to|100%{
        /* transform */
    }
}

伸缩布局

父元素指定display为flex

份额 flex

使用flex属性为子元素主轴指定份额。自动缩放。

为父元素设置min-width指定最小宽度,不会过度缩放

max-width指定最大宽度,不会过度拉伸

会对子元素有flex属性的子盒子配额分配固定宽度剩余的宽度

排列方向 flex-direction

设置主轴方向,默认 row 行向,column 列向

row|column - reverse 反转

主轴对齐方式 justify-content

flex-start 从主轴开头开始

flex-end 从主轴末端,盒子顺序不变

center 主轴居中

space-between 首末贴近盒子,中间平均分配空白

space-around 添加相同的主轴方向边距

侧轴对齐方向 align-items(一行)

stretch 默认 拉伸,

子元素没有高度时,子元素高度适应父盒子高度

否则相当于顶端对齐

flex-start 顶端对齐,上对齐

flex-end 底部对齐,下对齐

center 垂直居中

换行 flex-wrap

nowrap 默认 不换行,收缩强制一行显示,

wrap 必要时换行

wrap-reverse 必要时翻转换行,不常用

多行对齐 align-content

必须为 flex-direcion:row flex-wrap:wrap 才起作用

flex-flow:flex-direction flex-wrap;

order

排列顺序,数值越小越靠前,可以为负数,默认为0


转载至CSDN博主:[李唐敏民]

最后修改:2021 年 02 月 18 日 09 : 26 PM
如果觉得我的文章对你有用,请随意赞赏