CSS是什么
CSS:层叠样式表:主要是负责页面的样式效果设置。
样式表允许以多种方式规定样式信息,样式信息可以规定在单个html元素中,或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。
CSS语法
注释:/*注释的内容*/
CSS规则由两个主要的部分构成:选择器(为谁去做美化,选择其中一些或某一个标签),以及一条或多条声明(为它做什么样的美化,具体的美化过程);
例如;selector {declaration1; declaration2; ... declarationN }
选择器 {
声明1;
声明2;
声明3;
……
}
即:
selector {
Color: red; // 声明
size: 20px;
key: value;
----
}
css与html结合使用
1:内联样式、行内样式
在所有的html标签上都有style属性,这个属性就是专门用来书写CSS代码。
使用内联样式书写的css代码,直接作用于该标签。
CSS代码的书写格式:
CSS代码都是有key和value组成的声明。key可以从CSS手册查阅。而value可以由用户根据实际的效果进行调试。
在html标签中使用style属性书写CSS代码,如果是多个CSS属性值,需要在多个属性之间使用分号隔开。
2:内部样式
内联样式可以实现css的样式,但是如果在一个页面中有很多相同的标签都需要同一个样式,在各自的标签内写css肯定不行,效率太低,而且html和css一起使用,看起来很臃肿,没有做到内容与表现相分离,不建议使用。
可以在html文件中直接把CSS代码抽取出来,在head标签中书写style标签,然后在引用到某个html标签上。
3:外部样式
内部样式实现了同一页面中相同标签样式的统一,他是他的作用域仅仅是在一个页面,
如果在一个项目中,多个页面中有相同的标签,并且他们需要相同的CSS效果相同的时候,我们可以把CSS代码单独的抽取到一个独立的CSS文件中。在需要使用CSS代码的文件中引入这个CSS文件即可。
CSS文件中可以不用书写具体的style标签。而直接书写css代码。
引入css方式:
使用link标签引入:
在head标签中可以直接使用link标签引入外部的css文件
注意:link中的属性说明:
rel="stylesheet"表示连接的资源是一个样式表,即就是CSS文件,固定写法
type 表示连接的资源是文本资源,其中放的css代码,默认,可有可无
href表示资源的路径,css文件的地址
4:样式优先级
哪个css样式离标签最近,谁的优先级高,注意:只有发生冲突的时候才会考虑。
css选择器
选择器:表示当前的CSS代码要作用在具体的哪个html标签上。
下面介绍3个常用的选择器
1:标签名选择器
见名思意,就是通过标签的名字,选择最终css代码要作用的标签
Div,span -- 选择所有的div和span
Div span -- 选择的是div下面的所有的span
2:id选择器
在html中,所有标签中都有一个id属性,可以根据这个id的属性值,来确定CSS代码到底要作用在哪个标签上。
id 选择器以 "#" 来定义。要求每一个html标签的id属性值必须要唯一。
语法:
#id属性值{
css代码
}
注意:html标签中可以书写id属性,要求在html页面上所有的标签的id值不能重复,如果定义重复,虽然不会影响CSS的效果,但是后期学习JavaScript和DOM技术动态根据id获取页面上的标签时就会出现错误。记住:id唯一
3:clss选择器
由于页面上的标签的id一般不会重复,使用id选择器只能给某个标签设置样式,如果有多个标签需要相同的样式,或者不同的标签需要相同的样式,这时我们可以使用html标签中的class属性,这时我们在css代码中就可以根据这个class属性值来选择css代码要作用的html标签。每一个html标签都可以书写class属性。
语法:
.class属性值{
css代码
}
4:基本选择器的优先级
ID选择器 > 类选择器 > 标签选择器
css字体样式
font-fanily:设置字体类型
font-size:设置字体大小
font-style:设置字体风格
font-weight:设置字体粗细
font:在一个声明中设置所有字体的属性
css文本样式
color:设置文本颜色
text-align:设置元素水平对齐方式
text-indent:设置首行文本缩进
line-height:设置文本行高
text-decoration:设置文本装饰
伪类
指同一个标签根据其不同状态有不同的样式,有冒号表示
静态伪类:只能用于超链接的样式
动态伪类:针对所有标签都适用的样式
背景属性
背景颜色:background-color
像素值:px
水平方向: left、center、right
垂直方向;top、center、bottom
列表样式
list-style:简写属性,用于把所有用于列表的属性设置于一个声明中
list-style-imgae:将图像设置为列表项标志
list-style-position:设置列表中列表项标志的位置
list-style-type:设置列表标志的类型
有序列表和无序列表
无序列表- ul
有序列表- ol