css知识点汇总

八二年的风001

于 2022-10-18 22:23:40 发布

阅读量137

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/Bloomberg_Alex/article/details/127398127

版权

CSS

css和css3

升级：CSS是从CSS1.0、CSS2.0、CSS2.1和CSS3.0

CSS3.0相对于CSS2.0来说，最典型的就是你可以直接为文字设置阴影和为标签设置圆角

css三种引入方式

外部样式表

外部样式表都是在head标签内使用link标签来引用的

内部样式表

把HTML代码和CSS代码放在同一个文件中。其中CSS代码放在<style></style>标签对内，并且<style></style>标签对是放在head标签对内的

行内样式表

css选择器

基本选择器

标签选择器
ID选择器
- #
类选择器
- .

高级选择器

层次选择器
- 后代选择器
  - body p
- 子选择器
  - body>p
- 相邻选择器
  - .active+p
- 通用选择器
  - .active~p
结构伪类选择器
- p:first-child
- p:last-child
- p:nth-child(n)
- p:first-of-type
- p:last-of-type
- p:nth-of-type(n)
属性选择器
- a[id]{}
  - E[attr]
- a[id=first]
  - E[attr=val]
- a[href^=http]
  - E[attr^val]
- a[href$=png]
  - E[attr$val]
- a[class*=links]
  - E[*=val]
伪元素选择器
- ::first-letter：表示元素的第一字符
- ::first-line：表示元素的首行
- ::before 表示添加到元素内部的最前面
- ::after 表示添加到元素内部的最后面
否定伪类选择器
- p:not(.p1)
并集选择器
- 选择器，选择器
交集选择器
- 选择器选择器
通配符
- *

字体样式

font-family

font-style

font-size

font-weight

文本样式

color

text-align

text-indent

text-decoration

line-height

vertical-align

伪类

a:link

a:visited

a:hover

a:active

列表样式

list-stye-type：none

背景样式

background-images：url（地址）

background-repeat：no repeat

background-position：95%

渐变

background: linear-gradient(to top, orange, blue,blanchedalmond)

css盒子模型

属性组成

content--内容
- 盒子模型中心，必备，其他三为可选
- 属性
  - width
  - higth
  - overfiow--当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法
- 说明
  - 只有块元素能设置width和height，行内元素无法设置width和height
  - div元素是块元素，span是行内元素。因此div元素可以设置宽度width和高度height，而span元素无法设置宽度width和高度height
  - 如果，行内元素也想设置高宽（span），display属性来将行内元素转换为块元素，或者将块元素转换为行内元素
padding--内边距
- 内边距，指的是内容区和边框之间的空间，可以看做是内容区的背景区域。
- 属性
  - padding-top
  - padding-bottom
  - padding-left
  - padding-right
  - padding
    - 简便方法例子
    - 一.“padding:20px;”表示4个方向的内边距都是20px。二.“padding:20px 40px;”表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。三.“padding:20px 40px 60px 80px;”表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。大家按照顺时针方向记忆就可以了
margin--外边距
- 外边距，指的是两个盒子之间的距离，它可能是子元素与父元素之间的距离，也可能是兄弟元素之间的距离
- 属性
  - margin-top
  - margin-bottom
  - margin-left
  - margin-right
  - margin--综合以上四种
    - 例子和padding，简洁方法一样
- 负margin技术
  - CSS允许给外边距属性指定负数值，当指定负外边距值时，整个盒子将向指定负值的相反方向移动，以此可以产生盒子的重叠效果
border--边框
- 在CSS盒子模型中，边框跟我们之前学过的边框是一样的
- 属性
  - border-width--边框的宽度
  - border-style--边框类型
  - border-color--边框的颜色
  - border--综合以上三种属性
    - 例子：“border-width:1px;border-style:solid;border-color:gray;”等价于“border:1px solid gray;”
    - border：边框大小边框类型边框颜色
    - 两值间一定空格隔开
辅助属性
- width--宽度
- heigth--高度