CSS的基础属性

admin管理员组

文章数量:1794759

CSS的基础属性

一、什么是CSS

Cascading Style Sheets （ 层叠样式表）

二、CSS的引入方式 1） 内嵌式：写在HTML内的样式 2） 外链式：创建一个css文件，在HTML中用link进行链接 3） 行内样式：写在标签内的样式 三、CSS的选择器 1） “ * ”通配选择器：选中页面中全部元素 2） 标签选择器：选择页面中的标签 3） “ . ”类选择器：在标签中添加class属性后使用 4） “ # ”id选择器：在标签中添加id属性后使用 5）群组选择器：中间用“ ，”隔开 6） 后代选择器：空格使用，用于多层子节点 7） “ > ”直接子集选择器：选择直系字节点 8） “ + ”相邻下一个兄弟 9） “ ~ ”同级后所有的兄弟 10）“ [] ”属性选择器 [属性名^=首字母] [属性名$=结尾字母] [属性名*=包含字母] [属性名~=包含字母（只能自己有别人没有的字母）] 四、伪类选择器

1.超链接

1） “ :link ”未访问链接的样式 2） “ :visited ”已访问链接的样式 3） “ :hover ”鼠标经过的样式 4） “ :active ”激活时的样式

注：以上顺序不能错

2.表单伪类选择器

1） “ :focus ”获得焦点时的样式 2） “ :bluk ”失去焦点时的样式 3） “ :checked ”勾选的样式 4） “ :enabled ”激活时的样式 5） “ :disabled ”失活时的样式

3.nth伪类选择器

1） “ :first-child ”第一个子元素（先位置，后类型） 2） “ :last-child ”最后一个子元素 3） “ :first-of-type ”第一个子元素（先类型，后位置） 4） “ :last-of-type ”最后一个子元素 5） “ :nth-child( ) ”正序查找第几个元素（先位置，后类型） 6） “ :nth-last-child( ) ”倒序查找第几个元素 7） “ :nth-of-type( ) ”正序查找第几元素（先类型，后位置） 8） “ :nth-last-of-type( ) ”倒叙查找第几个元素 9） “ :not ”反选 10）“ :empty ”空白元素 11）“ :only-chid ”独生子 12）“ :only-of-type ”一个类型中唯一的独生子

4.伪类元素选择器

1） “ ::before ”元素前 2） “ ::after ”元素后 3） “ ::first-letter ”第一个字节 4） “ ::selection ”选中时的样式 五、字体样式 1） “ font-size ” 子体的大小设置 2） “ font-family ” 字体类型设置 3） “ font-weight ” 字体的加粗粗设置 4） “ coklor ” 颜色设置 5） “ opacity ” 透明度设置 6） “ font-style ” 字体倾斜设置 7 ） “ text-align ” 对齐方式 8） “ text-decoration ” 线条设置 “ underline ” 下划线 “ line-thtough ” 删除线 “ overline ” 上划线 9） “ text-indent ” 首行缩进 10） “ text-overflow ”单行文本省略号 11） “ text-align ”非最后一行对齐方式 12） “ text-align-last ”最后一行对齐方式 13） “ line-height ”行间距 14） “ text-transform ”英文单词切换大小写 “ uppercase ”大写 “ lowercase ”小写 “ lapitalize ”首字母大写 15） “ word-spacing ”单词间距 16） “letter-spacing ”字符间距 六、盒子模型

1.盒子模型的分类（box-sizing）

1）标准盒子（content-box）：会被内容撑开盒子的大小 2）怪异盒子（border-box ）：不会被内容撑开大小

2.内容（content）

1）行内块元素：不支持宽高设置 2）宽高由自身内容撑开

3.内填充（padding）

1）默认撑开盒子大小 2）top/bottom/left/right 上下左右

4.边框（border）

1)默认边框 宽（width）+ 颜色（color）+ 样式（style） 样式（style）： 实线（solid） 虚线（dashed） 双实线（double） 点（dotted） 2）圆角边框（rabius）

5.外边距（margin）

1）块元素 2）top/bottom/left/right 上下左右 上（top）边距会向父节点传递 解决方法：给父节点添加overflow：hidden； 七、切换元素（display） 1）行内元素（inline） 2）块元素（block） 3）行内块（inline-block） 八、背景设置（background）

1. 背景色（color） 2. 背景图片（image） 3. 背景图片平铺设置（repeat）

1）重复（repeat） 2）不重复（no-repeat） 3）水平重复（repeat-x） 4）垂直重复（repeat-y） 5）缩放重复（round） 6）不缩放重复（space）

4. 背景图片大小（size）

5. 背景图片位置（position）

6. 图片初始化位置

1）边框（border-box） 2）内填充（padding-box） 3）内容（content-box）

7. 图片裁切位置（clip）

1）保留内容（content-box） 2）保留内容和内填充（padding-box） 3）不裁切（border-box）

8. 图片固定（attachment）

1）固定（fixed） 2）滚动（scroll） 九、浮动（float） 1）左浮动（fuleft） 2）右浮动（right） 十、定位（position）

1.默认定位（static） 2.相对定位（relative）：相对于自身的定位 3.绝对定位（absolute）：脱离文档流，默认的包含框是浏览器 父节点添加非static定位，就自动成为包含框 4.固定定位（fixed）：脱离文档流，包含框是浏览器，不随页面滚动而滚动 5.粘性定位（sticky）

十一、阴影 1）文字阴影（text-shadow） 2）盒子阴影（box-shadow） 十二、渐变 1）线性渐变（linear-gradient） 2）重复线性渐变（repeating-linear-gradient） 3）径向渐变（radial-gradient） 4）重复径向渐变（repeating-radial-gradient） 十三、过渡（transition）

过度属性——过度时间——动画类型——延迟时间

十四、变换（transform） 1）位置（translate） 2）缩放（scale） 3）旋转（rotate） “origin”修改变换中心 “perspecfive”透视 4）扭曲（skew） 十五、弹性盒子（flex） display：flex;

1.主轴方向（flex-direction）

1）默认（row） 2）右至左（row-reverse） 3）上至下（column） 4）下至上（column-reverse）

2.换行（flex-wrap）

1）换行（wrap） 2）不换行（nowrap） 3）反转换行（wrap-reverse）

3.主轴对齐方式（justify-content）

1）居中对齐（centr） 2）开始方向（flex-strt） 3）结束方向（flex-end） 4）两端对齐（space-between） 5）边距相等对齐（space-around）

4.交叉轴对齐方式（align-items）

1）居中对齐（centr） 2）开始方向（flex-strt） 3）结束方向（flex-end） 4）文字基线对齐（baseline） 5）拉伸（stretch）

5.多主轴对齐方式（align-content）

1）居中对齐（centr） 2）开始方向（flex-strt） 3）结束方向（flex-end） 4）两端对齐（space-between） 5）边距相等对齐（space-around） 6）拉伸（stretch）

6.项目属性

1）排序（order） 2）成长比例（flex-grow） 3）缩小比例（flex-shrink） 4）占据主轴空间大小（flex-basis）

7.项目在交叉轴上的对齐方式（align-self）

1）居中对齐（centr） 2）开始方向（flex-strt） 3）结束方向（flex-end） 4）文字基线对齐（baseline） 5）拉伸（stretch）

本文标签： 属性基础css