css基础

it2022-05-05  184

零散的注意事项: 1. 当想要去除按钮的边框时,用border:none; 2. font-style:normal可取消字体倾斜 3. !important代表优先选择该样式 4. outline:none表示去除input标签的选中变蓝的样式

css基础语法

选择器优先级: 1. !important > 行内样式 > ID选择器 > 类选择器 > 元素选择器(标签选择器) > 通配符(*)) > 继承 > 浏览器默认属性 2. 行内样式>页内样式>外部样式>浏览器自带样式 3. 同样优先级的选择器,看设置的属性所在的选择器谁在后选择谁

几种选择器

选择器描述注意事项以选择器名称为name为例id选择器#name{}id选择器只能被调用一次(id用的少),而类选择器可以被多次调用(class用的多)。类选择器.name{}类选择器的名字不可用数字开头标签选择器直接以标签名字为选择器名*匹配所有选择器

css引入样式方式

1. 行内样式:(以a标签为例) <a style=" " ></a>
2. 页面内样式:
<head> <style> .name{} #name{} </style> </head>
3. 外部样式表
<head> <link rel="stylesheet" type="text/css" href="外部样式地址"> </head>

常见样式

属性描述取值text-align文本对齐方式left/center /right/justify(两端对齐)text-indent首行缩进text-transformcapitalize(文本中每个单词以大写字母开头)/uppercase(文中所有单词都为大写字母)/lowerspace(文中所有单词都为小写字母)font-size字体大小单位为像素font-style字体倾斜/正常normal(正常字体)/italic(倾斜字体)/oblique(倾斜字体)font-family字体样式(可以赋好几个值,如果找不到第一个值对应的字体,则去找第二个。如果没有设置字体属性,则取默认字体显示)黑体/宋体/…font-weight字体粗细lighter normal blod bloder/数字(400等同于normal)font:字体大小,字体字体大小和字体样式一同设置color字体颜色background-color背景颜色① #ff0000(#ff0) ② Rgb(255,0,0):红绿蓝不同程度合成的不同色彩text-decorationa标签文字是否加上下划线none(不加下划线)/underline(加下划线)/overline(加上边线)width宽度height高度border:粗细 线型 颜色设置边框线线型取值:dotted(点状线) dashed(虚线) solid(实线) double(双线)border:none无边框线该样式可以去掉按钮的边框border:transparent透明边框border-width边框线的粗细thin(细边框) medium(中等边框)border-left/border-right/border-top/border-bottom左 右 上 下background:颜色 背景图片 是否重复 水平位置 竖直位置背景是否重复取值:no-repeat repeat-x repeat-y repeat ; 背景定位位置:水平:left /center/right/百分比 垂直:top/ center/ bottom/百分比background-attachment背景是否固定fixed(固定) scroll(滚动)vertical-align垂直对齐方式(可设置图片和文字的相对位置)top/center/bottomline-height行高(行与行之间的距离)当行高和某一个元素高度相同时,该元素的子元素会垂直居中;当大于div高度时,在偏下部分。当小于div高度时,在偏上部分white-space是否换行nowrap(不换行)/normal(换行->默认) 注意: 1. font-size可取值: (1) 以px为单位 (2) 以em为单位的值是以它的父元素的字体大小为依据。1em是和自己的父亲字体大小相同。若子取值1.5em,父元素为20px。则子的字体大小为30px (3)以rem为单位的值,是以它的根元素(html)的字体大小为依据。如果设置了根的字体大小。则其余元素设置的rpm是以根的字体大小为依据的。如果没有设置,则用默认大小:16px (4)用百分比设置字体大小以浏览器默认16px为参考的。则100%=16px,50%=8px。以此类推

超链接样式

1. a:hover 鼠标悬停状态
2. a:link 访问前状态
3. a:active 鼠标点击时状态
4. a:visited 链接访问后状态
5. a:focus 获得焦点时状态

列表样式

`list-style-type`:设置列表的起始图标 取值: none circle(空心圆) desc(实心圆) square(实心方块) demical(阿拉伯数字 ) lower-alpha(小写英文字母) upper-alpha(大写英文字母) lower-roman(小写罗马数字 ) upper-roman(大写罗马数字)

list-style-position:列表项标记(初始图标)在文本以内还是在文本以外 取值: inside:列表项目标记放置在文本以内(即列表项目标记属于li的一部分) outside:默认值。标记放在文本以外(即列表项目标记不属于li的一部分) 注意: a. 无论是inside还是outside,只要给ul/li设置字体大小,标记都会随着字体大小的变化而变化 b. 当取值为outside时,设置padding可以调整列表项标记和列表文字的间距

inside图例

outside图例

box-sizing

取值:
1. border-box:当设置宽高时,width=content+padding+border
2. content-box:当设置宽高时,width=content(默认)

内外边距

1.padding
四个值:上 右 下 左 三个值 :上 左右 下 两个值:上下 左右 一个值:上下左右
2. margin
四个值:上 右 下 左 三个值 :上 左右 下 两个值:上下 左右 一个值:上下左右

最新回复(0)