css基础知识点整理
css基础知识点整理
- 代码规范
-
- 放置规范
- 格式规范
- 代码规范
- 示例演示
- 基本选择器
-
- 元素选择器
- 类选择器
- ID选择器
- 基本选择器的组合方式
-
- 层级关系
- 边框属性
-
- border
- width
- height
- 代码演示：
- backgroud-color
- 布局
-
- float---浮动属性
- 转换
-
- dispaly
- 字体
-
- font-size 字体的大小
- color 字体的颜色
- css中的盒子模型
-
- 什么是盒子模型
- 边框
- 内边距 padding
- 外边距---margin
- css和html的结合方式
-
- 行内样式
- 标签样式
- 外部样式
-
- linke标签样式
代码规范
放置规范
格式规范
代码规范
示例演示
<a href="https://www.csdndoc.com/tag/%e5%a4%a7%e5%bf%bd%e6%82%a0" title="View all posts in 大忽悠" target="_blank" style="color:#0ec3f3;font-size: 18px;font-weight: 600;">大忽悠</a>个人主页 span{font-size: 120px;color: orangered;border: 5px solid royalblue; }大忽悠到此一游
基本选择器
元素选择器
示例演示：
大忽悠个人主页 span{font-size: 120px;color: orangered;border: 5px solid royalblue; }大忽悠到此一游
卧槽，无情！！！卧槽,残忍！！！
类选择器
示例演示:
大忽悠个人主页 .BLACK{ font-size: 50px; color: black; } .RED{ font-size: 50px; color: red; } <span class="BLACK">span1:要求变成黑色
<span class="RED">span2:要求变成红色
<div class="BLACK">div1:要求变成黑色
ID选择器
示例演示:
大忽悠个人主页 #d1{ font-size: 50px; color: red; } span1:要求变成黑色
span2:要求变成黑色
div1:要求变成黑色<div id="d1">div2:要求变成红色
基本选择器的组合方式
层级关系
示例演示:
大忽悠个人主页 div font{font-size: 50px;color: blue;} 字体大小为50像素，字体演示为蓝色不用管我 
边框属性
所有html标签都有边框，默认边框都为不可见
border
width
用于设置标签的宽度
height
用于设置标签的高度
代码演示：
大忽悠个人主页 div{ border: 1px solid blue; width: 300px; height: 300px; } 大忽悠门派-----大忽悠掌门人 
backgroud-color
示例演示:
大忽悠个人主页 div{ border: 1px solid blue; width: 300px; height: 300px; background-color: beige; } 大忽悠门派-----大忽悠掌门人 
使用颜色代码，可以进行微调操作
布局
float—浮动属性
代码演示:
大忽悠个人主页 #d1{ border: 1px solid blue; width: 150px; height: 150px; background-color: beige; float: right; } #d2{ border: 1px solid blue; width: 150px; height: 150px; background-color: blue; float: right; } #d3{ border: 1px solid blue; width: 150px; height: 150px; background-color: red; float: right; } <div id="d1">
转换后:
