2020-12-09

CSS

//1.文本样式
属性 含义 属性值
font-size 大小 (默认:inherited,继承父级大小)(像素:px、百分比:%、倍数:em)(小:small、大:large、正常:medium)
font-weight 粗细 (默认:normal、普通)(粗体:bold、有强调的意思、粗细700)(自定义:100-900)
font-family 字体 (格式:“宋体”,“Arial”;)添加多种字体,用逗号隔开、防止一些用户没有第一种字体,就会显示第二种字体
font-style 样式 (默认:normal)(有斜体的字体设置斜体:italic)(所以字体斜体:oblique)
color 颜色 三种样式:(名称:red)(16进制的RGB值:#RRGGBB)(rgba函数:rgba(255,0,0,0.5))红,绿,蓝,透明度
font 复合 基本写法:(style weight size family)必要写法:(size family)
在这里插入图片描述

//2.背景样式
属性 含义 属性值
background-color 背景颜色 和文本样式的三种写法一样
background-image 背景图片 (路径:url(路径))
background-repeat 背景图片平铺方式 (默认:repeat,平铺满)(水平平铺:repeat-x)(垂直平铺:repeat-y)(不平铺:no-repeat)
background-position 背景图片位置 坐标:(x y)、数字:(px/%)、水平:(left/center/right)左/中/右、垂直(top/bottom)上/下
background-attachment 背景图随滚动条的移动方式 (按元素进行偏移(默认):scroll)(按浏览器进行偏移:fixed)
background 复合 基本写法:(color image repeat position)
在这里插入图片描述

//3.段落样式
属性 含义 属性值
text-align 对齐方式 (默认左对齐:left)(居中:center)(右对齐:right)(两端对齐:justify)
line-height 行高 (默认:不是固定值,根据当前字体的大小变化)(数字:px或scale[相对于原来字体的比例])
text-indent 首行缩进 缩进:font-size的两倍,或2em[em相对单位],永远跟一个字体设置的大小相同
text-decoration 文本装饰 (默认:none)(下划线:underline)(删除线:line-through)(上划线:overline)
text-transform 文本大小写 针对英文(小写:lowercase)(大写:uppercase)(首字母大写:capitalize)
letter-spacing 字间距
word-spacing 词间距 针对英文
word-break 非常强烈的折行 break-all
word-wrap 不是那么强烈的折行 break-word
在这里插入图片描述

//4.边框样式
属性 含义 属性值
border-width 边框大小 (像素:px)(倍数:em)
border-color 边框颜色 和文本样式的三种写法一样
border-radius 圆角边框 (像素:px)(百分比:%)
border-style 边框样式 (默认,实线:solid)(虚线:dashed)(点线:dotted)
border-collapse 合并表格边框 (默认,分开:separated)(合并:collapse)

  • 单独选择一边 (上:border-top)(右:border-right)(下:border-bottom)(左:border-left)
    border 复合样式 基本写法:(大小,样式,颜色)
    //5.样式特性
    ● 层叠性
  • 后来居上:后面的会替代前面的样式

● 继承性

  • 子承父业:继承父元素的某些样式

//6.元素显示类型display
属性 含义 属性值
display 元素显示类型 (块级元素:block)(行内元素:inline)(行内块元素:inline-block)(不占空间隐藏:none)

  • 块级元素 block
  • 行内元素 inline
  • 行内块元素 inline-block
  • 不占空间隐藏 none
    visibility 元素显示和隐藏 (默认,显示:visible)(占空间隐藏:hidden)

猜你喜欢

转载自blog.csdn.net/weixin_51734251/article/details/110927711