概述
一、样式表
①行内（内联、行间）样式表： 直接写在标签身上的样式
②内部样式表：直接在HTML文件中通过style标签书写，html代码和css代码在同一个文件中，就称为内部样式表
③外部样式表：
方式一：<style>
@import url(CSS文件路径）
</style>
方式二：<link rel="stylesheet” href="css代码路径"
☆两种导入方式区别：
1.link属于HTML代码，@import是CSS代码；
2.Link引入的方式会和HTML同时加载，@import会先等HTML加载完成后才加赞CSS；
3.Link没有兼容问题，@import有兼容问题，只有IE5以上的才能识别；
4.Link引入的js是可控制的，@import引入的js不可控制；
优先级：行内>内部和外部看书写顺序（后者覆盖前者）
二、CSS选择器
1.标签选择器====直接写标签名，权重值 1
2.ID选择器=====标志:#，权重值 100 {ID名具有唯一性，一个id名只能使用一次}
3.类（class）选择器====标志：.点，权重值 10 {可多次使用}
4.群组选择器====标志：，逗号，权重值 按各自原先的权重值走
5.通配符选择器====标志：* 权重值 0
使用场景：清除所有标签间距
6.包含选择器=====权重值：所有选择器相加之和
1）后代选择器====标志： 空格；
2）子代选择器====标志：> 大于号
7.伪类选择器====标志：一个冒号，权重值 10
：link{} 超链接初始状态；
：visited{}超链接被访问后的状态；
：hover{}鼠标悬停时的状态；
：active{}鼠标按下时的状态；
4个选择符连用时，顺序不可乱
动态伪类：：focus{}鼠标获得焦点的状态（一般用在表单元素上）
8.伪元素选择器=====标志：两个冒号，权重值 1
::after====在...之后 ::before====在...之前 （默认是行内元素）
::first-line====找第一行 ::first-letter====找第一个字
9.css新增参与权重值的选择器：
属性选择器====标志:[] 权重值：10
[属性名]==找到带有该属性名的标签；
[属性名=“属性值”]====找到带有该属性名，且属性值也一致的标签；
[属性名~=“属性值”]===模糊查找，要求满足其中一个值即可；
[属性名*=“属性值”]====更模糊查找。要求满足其中一个词即可；
[属性名^=“属性值”]=====必须以该值为开头；
[属性名$=“属性值”]====必须以该值为结尾；
☆权重值高的会覆盖权重值低的，如果权重值一致，后置覆盖前者；
!Important权重最高，直接写在属性后面；
☆优先级顺序：行内>ID>类=伪类=属性>标签=伪元素>通配符
三、浮动
作用：实现横向排列
特点：1.元素一旦加了浮动，就会漂浮起来，不占据位置，会导致后面的元素向前补齐。
2.浮动的元素是没有办法覆盖文字和图片的
3.给‘相邻’的多个元素都添加浮动，会实现横向排列的效果
4.如果一行放不下会自动换行。
5.默认纵向排列的标签不设置宽度，宽度和父亲保持一致，但是加了浮动之后宽度由内容决定
6.默认横向排列的标签不设置宽度，宽度由内容决定，就算手动设置宽高也是加不上的，但是如果给这个标签写了浮动，那么他支持添加宽高了
清除浮动：clear：both
最后
以上就是悦耳咖啡为你收集整理的CSS基础的全部内容，希望文章能够帮你解决CSS基础所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复