CSS学习笔记

Zxx
28 阅读5分钟

选择器

基础选择器：

  1. 通配符选择器 *{

    }

  2. 标签选择器 div{

    }

  3. 类选择器 .box{

    }

  4. id选择器

    test{

    }

  5. 行内样式

    行内样式

  6. !important

属性选择器：
<style type="text/css">
​
标签名[属性名] {
​
}
标签名[属性名 = 值] {
    
}
​
</style>
​
<body>
​
<标签名 属性名 = " "></标签名>
​
<标签名 属性名 = "值"> </标签名>
​
</body>
复合元素选择器：

叠加计算规则

  1. 多元素选择器：

    选择器1，选择器2...{

    }

  2. 后代元素选择器：

    E F{

    }

  3. 子元素选择器：

    E > F{

    }

  4. 相邻元素选择器：

    E + F{

    }

伪类选择器：

用来给超级链接的不同状态来设置样式。love hate 准则

  1. 向未被访问的连接添加样式

    :link{

    }

  2. 向已被访问的链接添加样式

    :visited{

    }

  3. 鼠标悬浮在元素上时添加样式

    :hover{

    }

  4. 鼠标点击瞬间添加样式

    :active{

    }

css3中的结构伪类选择器：

  1. E:first-child{} : 匹配第一个孩子

  2. E:last-child{} : 匹配最后一个孩子

  3. E:nth-child(n){} : 匹配第n个孩子

  4. E:nth-child(2n){} : 匹配偶数孩子

    E:nth-child(even){} :

  5. E:nth-child(2n+1){} : 匹配奇数孩子

    E:nth-child(odd){} :

  6. E:only-child{} : 匹配有且只有一个孩子

css3中的伪元素：

  1. E:first-letter{}: 操作当前元素中的第一个字

  2. E:first-line{}: 操作当前元素中第一行

  3. E::before{}: 在之前插入，在一个盒子内部的最前面

    //插入到content中
​
E::before{
​
content:"插入示例"
​
}

  4. E::after{}: 在之后插入，在一个盒子内部的最后面

行内元素：

常见的行内元素包括 <span>、<a>、<img>、<input>。

  1. 水平排列：行内元素与其他行内元素在同一行内水平排列，直到一行排不下才会换行。
  2. 尺寸由内容决定：行内元素的尺寸主要由其包含的内容决定，不可通过CSS设置高度和宽度。
  3. 内外边距限制：行内元素的上下内外边距通常不会影响布局，只有左右内外边距会被应用。

属性

文本属性：
  1. color:
  2. text-align: left / right / center
  3. text-decoration: none(去掉文本修饰线) / underline(去除下划线) / overline(上划线) / line-through(删除线)
  4. text-transform: capitalize / uppercase / lowercase 大小写转换或首字母大写
  5. Line-height: 行高
  6. text-indent: 设置首行缩进
  7. letter-spacing: 设置字符间距
  8. word-spacing: 设置单词间距
字体属性：
  1. font-style: normal(正常) (italic)斜体
  2. font-weight: normal bold(加粗)
  3. font-size: 设置字体大小
  4. font-family: 设置字体(楷体，宋体...)
  5. font: 通用属性
列表样式属性：

无序列表和有序列表

  1. list-style-type: none / disc(实心圆) / square(实心小方块) / circle(空心圆)
  2. list-style-position: Inside / outside 设置列表项标记的放置位置
  3. list-style-image: url
  4. list-style: 通用属性
!important：

提升属性的权重为无穷大

代码格式：

color: #000 !important;
css三大特性:

继承性 层叠性：相同属性覆盖，不同属性叠加 优先级：通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important

背景样式属性：
  1. background-color: 设置背景颜色
  2. background-image: url 设置背景图片
  3. background-repeat: repeat / repeat-x / repeat-y / no-repeat 设置背景图片是否重复
  4. background-position: 设置背景图像起始位置
  5. background-attachment: scroll(滚动) / fixed(固定)
  6. background: 通用属性
border属性:
border: 1px  solid(实线) /dotted(点线) / dashed(虚线) / double(双边框) #000
display属性：
display:none;//隐藏元素
display:block；//显示元素

网页布局

传统布局：

标准（文档）流

规则：从左到右，从上到下

margin塌陷现象：竖直方向的margin值不会叠加，它会取较大的值

善于使用父元素的padding，而不使用子元素的margin

浮动流（outdated）

定位流

使用时一般子绝absolute父相relative 搭配使用

固定定位：

position:fixed;

相对定位：

position:relative;

1.改变位置参照物为自己原来的位置 2.不脱标，占位置 3.改变位置显示模式特点不变

绝对定位：

position:absolute;

1.脱标，不占位置 2.改变位置参照物为父级（如果非子绝父相参照物为浏览器窗口） 3.改变位置显示模式特点具备行内块特点

绝对定位-居中： position：absolute; left:50%; top:50%; transform:translate(-50%,-50%);

固定定位： position：fixed；

1.脱标，不占位置 2.改变位置参照物为浏览器窗口 3.改变位置显示模式特点具备行内块特点

z-index属性：堆叠属性，值越大越再上面，默认为0

flex布局：

Flex 布局教程：语法篇 - 阮一峰的网络日志

grid布局：

CSS Grid 网格布局教程 - 阮一峰的网络日志

css3新增
border-collapse属性：
border-collapse:collapse;//合并表格边框
文本阴影：

text-shadow: h-shadow(水平阴影位置，允许负值) / v-shadow(垂直阴影位置，允许负值) / blur(模糊程度) / color(阴影颜色)

盒子阴影：

box-shadow: h-shadow(水平阴影位置，允许负值) / v-shadow(垂直阴影位置，允许负值) / blur(模糊程度) / color(阴影颜色) / spread(阴影尺寸) / inset(内部阴影)

圆角矩形：

border-radius: top right bottom left

透明度：

rgba(255,255,255,透明度0~1)

avatar
文章
阅读
粉丝