CSS基础知识学习笔记

CSS基础知识学习笔记

HTML表达结构
CSS表示样式，表示他应该长什么样子
样式和内容/结构是分离的
改变页面颜色
style = “background-color: #———" 代表rrggbb
style = “background-color:rgba(—,—,—,—)" 前三个值代表RGB三个色的值，值域在0-255，最后一个值域是0-1之间代表透明度
style = “background-image:url(---)"代表背景是一个图像,url里面的是图像的路径
如果图片的像素比较小，在背景设置的时候默认会铺满，可以用属性设置怎么去铺
style = “background-repeat:no-repeat”不重复
repeat-x在x方向重复
repeat-y在y方向重复
backgroud-position:center表示图片在中间
backgroud-position:top，right等等 也可以叠加
除了用英文单词还可以指出位置 ..px ..px代表多少x 多少y
还可以设置图片是否跟着文字滚动 默认是跟着文字滚动
不跟着文字滚动：background-attachment:fixed固定的

设置段落里面文字的颜色：style = “color:—"
定义缩进 style = “text-indent:2em”缩进两个字
padding:2em悬挂缩进，代表第二行开始要比浏览器边界缩进几个单位
line-height:n  -> n代表行间距
text-align:center 代表靠中间对其 justify代表两端对齐
word-spacing代表单词之间的空格可以设定为多少个像素
letter-spacing代表字符和字符之间的间距 多少个像素
text-transform:uppercase让所以字母都变成大些，capitalize代表首字母大写
text-decorstion:underline表示文字下面都会加上下划线，overline上划线，line-through中间划线

给字体设置
font-family: 
    serif大多的英文是这样的字体
    sans-serif
    monospace等宽字体
    cursive 手写字体
    fantasy 无法归类的 里面可能不是文字是⭐️之类的
这以上都是大的类别，并不是具体给的那个字体
也可以直接指定哪个字体
也可以加入多种备选字体
字体要不要倾斜 font-style:italic ->斜体 obique -> 浏览器计算产生斜体
font-variant:small-caps 小一号的大些字体
font-weight指定字体的粗细
font-size制定字体的大小 多少em
所有<p>元素变成粗体->
    P {font-weight:bold}
text-shadow:_px _px _px  rgba() 字体下面有阴影分别代表在xyz方向阴影的延展有多大，以及阴影的颜色
可以用“，”来分隔多个阴影
做轮廓：
三个参数，颜色，线形，边框的宽度
outline-color:后面设定颜色
outline-style:solid这是边框(->如果不设定的话默认是没有的) dotted点线 dashed划线 double两条细线 groove凹槽三维的 ridge凸槽三维的 inset 凹的边 outset凸的边
outline-width:->设定边框有多粗
不排序列表
在ul中设定style = “list-style-type:” ->circle空心圆 square方形 disc实心圆盘
“list-style-image:url()”放置图片
“list-style-position:” inside 第二行回来文字和小圆点左边对齐outside 第二行回来文字和小圆点右边对齐
指定表格的样式
style = “border: _px  solid color” 多少像素 什么样式 什么颜色
Table中合并表格的边线-> border-collapse:collapse 如果有两条表格边线是一起的就让他们合并
vertical-align:垂直方向对齐
text-align:水平方向对齐
也可以在table里面设置caption->标题的位置 top bottom
table-layout:automatic 所有的表格数据读进来以后浏览器根据所有的数据来分析每一列有多宽每一行有多高，全自动，如果表格非常大，要等很久才会出现表格
Fixed根据第一行的表格大小来决定一个表格的列宽是多少