css
css样式种类
- 内部样式
- 在head标签中使用 <style>标签
- 行内样式
- 直接在标签中写style属性进行赋值,style属性的就相当于内部样式的{}
- 外部样式
-
单独写一个文件命名为xxx.css,将css代码写入文件,在 <head> 中进行引用
-
选择器
常用选择器
- 标签选择器 标签类型{} ,直接写标签的名字就行
- id选择器 #id名称{} ,id不能重复,需要给标签添加一个id
- 属性类选择器 .class名称{} class可以重复,需要给标签添
- 加class属性
- 并集选择器, 选择器1,选择器2{}
- 属性选择器 标签[属性="具体属性值"]{} 例如：input[type="text"]{}
文本样式
- fontstyle
- 设置文字样式,常用取值为italic和normal 代码：font-style: italic;
- fontweight
-
设置文字的粗细,常用取值 lighter,bold和bolder还可以进行数字取值100,900 代码：font-weight: bold;
-
- fontsize
-
设置文字大小,取值是像素 代码：font-size: 100px;
-
- fontfamily
- 设置字体 代码：font-family: "宋体";
- textdecoration
-
文本装饰属性,常用取值underline(下划线)line-through(删除线)overline(上划线)none(什么都没有) 可以用none去掉a标签的下划线
-
- textalign
- 对齐方式: left right center
- textindent
-
缩进方式 2em代表两个文字宽度
-
- color
-
设置字体颜色”red”
-
背景样式
- backgroundcolor
-
设置背景颜色”red”
-
- backgroundimage
-
设置背景图片, background-image:url("img/1.jpg"); ,会自动平铺
-
- backgroundrepeat
-
设置平铺方式,有四个值,repeat(默认),norepeat(不平铺),repeatx(水平平铺),repeaty(垂直平铺)
-
- backgroundposition
-
设置背景定位方式格式为: 水平方向数值 垂直方向数值 ,水平各有left center right ,垂直有top center bottom,也可以是具体的像素值比如 100px 100px
-
- backgroundattachment
-
设置背景的关联方式常用有两个scroll(会随着滚动条的滚动而滚动),fixed(不会随着滚动而滚动)
-
边框
border 属性,连写格式 宽度 样式 颜色
盒子模型
- padding
-
内容到边框的距离叫做内边距,内边距属性按照的顺序是上右下左顺序进行设置也可以分开进行设置改变内边距元素的宽高会发生改变
-
设置内边距后元素的自身的宽高会发生改变
-
设置完内边距后颜色也会被设置上
-
- margin
-
外边距,元素边框与边框之间的距离,依次设置的上右下左
-
margin设置为 0 auto 就代表距离上方0像素,距离左右两边水平居中
-
- 盒子模型
-
元素的宽度:左边边框+左边内边距+内容宽度+右边内边距+右边边框
-
元素的高度:上边边框+上边内边距+内容高度+下边的内边距+下边边框
-
元素空间的宽度:左边的外边距+元素的宽度+右边的外边距
-
元素空间的高度:上边的外边距+元素的高度+下边的外
-
标准流
1. HTML标签被分为两种类型,一种是块级标签(独占一行,可以设置宽高),一种是行内标签(不独占一行,不能设置宽高)
2. 我们之前学的所有的标签,都是按照标准流进行排列的,块级元素从上到下,行内元素从左到右
- display
-
display属性:inline(行内)block(块级)inlineblock(行内块级,能够设置宽高),none(隐藏,不占空间)
-
浮动流
- float
-
浮动流,设置属性float能让元素向左或向右进行浮动元素会脱离标准流,那么标准流的元素会相应顶上来其次脱离标准流,会在相应的标准流的行号上进行浮动如果向左或向右进行浮动后,左右两边又有其他元素,就会紧贴那个元素浮动流不分行内和块级元素都可以设置宽高
-
- clear
-
设置clear属性,能够使元素在浮动的过程中不去贴靠其他元素,只能影响自己,不能影响其他元素
-
定位流
- 相对定位
-
不会脱离标准流,相对于在标准流的位置进行偏移,所以下面元素不会顶上来position属性为relative,再结合 top right bottom left 四个属性进行位置的确定
-
- 绝对定位
-
会脱离标准流,所以下面元素会顶上来,相对于在标准流的位置进行偏移设置postion为absolute,通过top right bottom left定位如果祖先元素没有定位流(相对定位,绝对定位,固定定位),绝对定位相对于body定位,如果祖先元素是定位流,绝对定位相对于祖先元素(就近原则)绝对定位不分行内和块级元素都可以设置宽高
-
- 固定定位
-
固定定位脱离标准流设置postion为fixed,通过top right bottom left定位不区分行内和块级和绝对定位相同,唯一不同就是不会随着滚动条滚动而滚动
-
zIndex
zindex 改变定位流中的前后顺序
定位流中有一下规律
默认情况下定位流会覆盖标准流
默认情况下后来的会覆盖之前的
定位流中设置zindex,谁的大谁就在前
如果父元素设置zindex,子元素的zindex就失效,谁的
父元素大,谁就会显示在上方(从父原则)