入门css(个人笔记）

一、CSS开篇介绍

1、基本概念

css 层叠样式表 Cascading Style Sheets 网页的样式

2.基本写法和语法

选择器、样式属性名、样式属性值 选择器{ 样式属性名：样式属性值； 样式属性名：样式属性值； } 学习css主要是学习和掌握我们常用的css样式属性名和对性的属性值 选择器：用来匹配我们对应的标签的。目的是让css可以知道去修饰哪些标签内容

3.引入方式

写法一 写在html里面的style标签之间。style一般放在head标签里面 写法二 写在外部的css文件里面，然后通过link标签引入这个样式文件 <link rel="stylesheet" href="style.css" /> 写法三 写在标签的style属性里面 一般使用第二种

行为、结构、表现分离 js html css

4.常用选择器

标签选择器 标签名 所有对应标签 统配选择器 * 所有标签元素 class选择器 .class值 找到所有拥有该class值的标签 id选择器 #id值 找到所有拥有该id值的标签 后代选择器 选择器1 选择器2{样式描述} 选择器1下的全部选择器2 子代选择器 选择器1>选择器2{样式描述} 只找儿子这一层里的选择器2 修饰选择器 标签.class值 class为该值的标签

选择器1，选择器2{样式描述} 选择器1和选择器2

5.选择器的优先级

如果某个样式已经被前面的选择器定义了，后面又写了怎么办 优先级相同的情况下，后者会把前者覆盖

权重 通配选择器 * 0 标签选择器 标签名 1 class选择器 10 id选择器 100 内联样式(写在标签内) 1000 !important(写在某个具体属性值后面) 最高/无穷大

二、常用样式属性

css里面如何书写注释：/*注释内容*/

1.border 边框

值：宽度 xpx

类型 solid(实线)/dotted(原点虚线)/dashed(虚线) 默认solid 颜色 英文/#色号/rgb(a,b,c) 默认为黑色 定义方法： 多边定义：border：width type color 单边定义：border-left/right/top/bottom:width type color 多边属性定义：border-width/style/color：值 单边属性定义：border-left/right/top/bottom-width/style/color：值

border-radius：xpx；有弧度的边框 圆的半径

2.尺寸相关样式

width 宽度 height 高度 值：xpx % 如果值为%，参考的是父标签进行百分比计算 块元素：默认宽度是他所在父元素的宽度，默认独占一行 行内元素(b、i、s、span、u)：宽高无效！！！ 行内块元素宽高有效

max-width/height 最大宽度/高度 min-width/height 最小宽度/高度

3.字体相关css属性：

font-size 字体大小 一般pc端，最小字体到12px font-family 字体 font-family：""; font-weight 字体加粗 值：normal bold(加粗) 数字 font-style 字体样式 值：italic(倾斜)

4.文本相关样式：

color 设置字体颜色 颜色单词、#色号、rgb(r,g,b) text-align 设置文本对齐方式 center、left、right、justify(两端对齐) text-decoration 设置删除线 none、line-through(<s>) text-transform 设置字母大小写 uppercase(大写)\lowercase(小写)\capitalize(首字母大写) letter-spacing 设置字间距 xpx line-height 设置行高 xpx white-spacing 控制换行 nowrap/normal overflow 超出隐藏 hidden text-overflow 显示省略号 ellipsis

三、常用样式属性二

1.列表相关样式

list-style:none; 去除列表前面的点 list-style-type: 规定点的类型 circle(空心圆)、desc list-style-image:url(); 自定义点的类型 list-style-position 点放在外面还是里面

2.背景相关样式

background-color 设置背景色 background-image 设置背景图片 background-repeat 设置平铺 no-repeat(不平铺时虚线下无图片)、repeat-x(横向平铺)、repeat-y(纵向平铺) background-size 背景图大小 px 百分比(100%只控制x 100% 100% 同时控制x、y) cover contain background-position 背景图对齐方式 right top\left top\left bottom\right top\center center(默认靠齐左上角)

简写 background：blue url(img.jpg) center center no-repeat

3.表格相关样式

border-collapse 表格风格效果 collapse(边框合并)、separate(默认分开) vertical-align 单元格内容垂直方向 top、middle、bottom

4.轮廓、边框阴影

轮廓 outline outline：width style color outline-width 宽度 outline-style 风格 outline-color 颜色 边框阴影 box-shadow box-shadow:横向偏移 纵向偏移 阴影模糊距离 颜色(rgba(r,g,b,0.1透明度)) 内部inset\外部

5.隐藏和显示、透明、hover样式

display:none; 消失,浏览器中没有位置 块元素 独占一行 宽高有效 display:block; 行内元素 一行里面 宽高无效 display:inline; 行内块元素 一行里面 宽高有效 display:inline-block;（有间距，可以让font-size=0，空格占位）

显示和隐藏 visibility 保留位置，显示和隐藏 visible，hidden opacity 透明度（0-1）

a的链接样式 a:link 鼠标没有点击的时候 a:hover 鼠标移动到上面的时候 a:active 鼠标点击的时候 a:visited 鼠标点击之后，访问过

所有标签都有hover的样式

四、常用样式属性三

1.浮动布局

浮动 如何让块元素到一行，且宽高有效 1.变成行内块元素 display:inline-block 2.浮动：float：left\right\none; 浮动的元素，其实在网页上是没有位置

存在问题：父元素丧失高度，后面内容会跟上来，导致布局混乱 解决方法： 方法一：给父元素加上 overflow：hidden；(溢出隐藏) 方法二：浮动的父元素后面加上一个空标签，这个空标签加上 clear：both；(清除两端浮动)缺陷：父元素还是没有高度 方法三：给父元素加上一个高度 overflow：hidden(隐藏）、auto(滚动条） overflow-x：hidden、scroll overflow-y：hidden\scroll 好处：可以解决浮动的元素，父元素没有高度的问题。可以让他随内容高度，自动撑起来

2.盒子模型

盒子模型 content-box 向外扩张 一个标签的大小，到底由哪些部分组成 content 内容 padding 内边距 内容边框与盒子边框之间的距离，影响盒子大小 margin 外边距 盒子在网页里和别人排版之间的间距，影响盒子位置 border 线边框 一个元素的大小=content+padding+border 一个元素在网页中占据位置的大写=元素大小+margin width、height属性规定了内容区大小，标签元素的大小会随padding、border的大小而变化 html标签很多都带有默认样式 很多标签都有自带的margin和padding *{margin：0；padding：0；} margin：值 四边 margin：值1 值2 上下 左右 margin：值1 auto 上下外边距 水平居中 margin：值1 值2 值3 上 左右 下 margin：值1 值2 值3 值4 上 右 下 左（顺时针) margin-left/right/top/bottom 各边 padding：值 四边 padding：值1 值2 上下 左右 padding：值1 值2 值3 上 左右 下 padding：值1 值2 值3 值4 上 右 下 左（顺时针) padding-left/right/top/bottom 各边

3.怪异盒子模型

怪异盒子模型 border-box 向内压缩 width,height = 元素大小 = content+border+padding box-sizing 描述了盒子模型的类型，有一定的兼容问题

4.定位方式

定位： 三个定位、两个判断、一个层级 三个定位：position left/right top/bottom 固定定位 fixed 相对定位 relative 绝对定位 absolute 两个判断： 该元素定位后在网页中是否还有位置 该元素定位相对于谁进行偏移 固定定位fixed 没有了位置 参考body 相对定位relative 依然有位值 参考自己原来的位置 绝对定位absolute 没有了位置 参考父类中由内向外第一个含有定位的元素 一个层级：z-index 层级高低问题

五、浏览器兼容问题

方法一：IE条件注释法 <!--[if lte IE 8]> <link rel="stylesheet" href="./css/style.css"/> <![endif]--> !不等于 lt小于 lte小于等于 方法二：css属性前缀法 方法三：选择器前缀法

六、补充

段落缩进：text-indent：2em； 圆弧边框：border-radius：xpx；有弧度的边框 圆的半径 最后一个li：li：last-child{} 给定：*{padding：0；margin：0；}