做牛腩的时候曾接触过css,有一篇博客总结如下:【牛腩】HTML+CSS基础了解
【如何引入css】
曾写了一篇文章:【JavaScript】什么是JavaScript?提到如何把JavaScript代码引入html代码中的几种方式。类似的,css代码引入html中也有那么几种方式。下面一一列举:
1、通过html提供的一个标签直接把css代码写入html代码页面。
border:1px;
}
此种方式的css代码只能在本页面中使用,复用性比较低。
2、通过html提供的一个标签引入外部css文件到html代码页。
3、通过html提供的一个标签 的 href 属性来把外部css文档引入html代码页。
link>
推荐使用这种方式,可用性高。为啥不推荐使用上一种引入方式就看看下面的对比。
第三种link引入与第二种@import引入的区别:
4、直接在html的各种标签中使用style属性。
只能适用于本标签,复用性低,不推荐使用。
【选择器】
css是用来对html的内容进行样式设置的,html页面是由一对对的标签以及实际要展示的内容来组成。
那么要如何对html中的特定内容实现特定的样式效果呢?就是通过html页面中众多的标签来控制的。标签对特定内容做标记,用来控制对特定的页面内容实现特定的效果。
css获取html中特定文本的标签以及标签的属性、属性值。加上样式设置。就这么实现了。
那么获取标签以及标签的属性、属性值的过程是通过选择器来实现的。
选择器分为这么几类:
基础的选择器:
1、标签选择器:找到所有指定的标签进行样式化。
div{
color:#0f0;
}
2、类选择器:使用类选择器首先要给html标签指定对应的class属性值。
.class的属性值{
color:#0f0;
}
3、id选择器:使用id选择器首先要给html标签添加一个id属性值。
#id的属性值{
color:#0f0;
}
优先级比较:
ID选择器>类选择器>标签选择器
注意:类选择器和id选择器的属性值都不能以数字开头,否则无效。
配合使用的选择器:
1、交集选择器:
对指定的选择器的公共部分
选择器1选择器2…{
样式1,样式2,……
}
2、并集选择器:
对指定的选择器进行统一的格式化。
选择器1,选择器2…{
样式1;样式2;……
}
3、通过选择器:
可以匹配任何元素
*{
样式1;样式2;……
}
4、伪类选择器:
针对元素处于某一状态
a:link{color:#FF0000}/*未访问的链接*/
a:visited{color:#00ff00}/*已访问的链接*/
a:hover{color:#ff00ff}/*鼠标移动到链接上*/
a:active{color:#0000ff}/*选定的链接*/
关于选择器,更详细的可以参考:有关 css选择器的基础知识、CSS3 选择器——伪类选择器
【盒子模型】
css中最最核心的部分就是盒子模型了。html页面内容无非就是文本、图片、图形。样式的设置无非就是设置颜色、大小、位置、形状。而盒子模型就是设置位置的一个关键点。
盒子模型长这个样子
Margin:外边距,一个盒子边框和另一个盒子边框的距离。
Border:边框
Padding:内边距,一个盒子边框和它的内容的距离。
正中间的是内容content。
定位也是用来设置html元素位置的。
定位分为三种:
1、相对定位:相对于元素原本的位置进行移动的。使用方式:position:relative;
2、绝对定位:相对于整个页面而言固定不变。使用方式:position:absolute;
3、固定定位:相对于浏览器而言固定不变。使用方式:position:fixed;
定位与盒子模型配合使用以控制html元素的位置。