CSS入门（样式表、选择器、class&id、网页图标、驼峰标识）

什么是CSS

CSS的全称是Cascading Style Sheets，层叠样式表
CSS的作用是：可以给网页中的每一个元素设置样式，让网页更加精美，完全没有使用CSS的网页：基本就是一堆从上到下、从左到右挨在一起的文字和图片。

CSS官方文档

https://www.w3.org/standards/techs/css
https://www.w3.org/TR/CSS22/
https://www.w3.org/TR/CSS22/propidx.html
https://developer.mozilla.org/zh-CN/docs/Web/CSS

CSS样式的书写格式

冒号:左边是样式名，冒号:右边是样式值

CSS引入方式

CSS提供了3种方法，可以将CSS样式应用到元素上

• 内联样式（inline style）
• 文档样式表（document style sheet）、内嵌样式表（embed style sheet）
• 外部样式表（external style sheet）

内联样式表

将样式直接写在元素的style属性上

文字内容

内嵌样式表

将样式写在head元素的style元素中

    
    
    
    


    
网页的标题
    
网页段落
    百度一下
    
hahah

外部样式表

样式写在单独的CSS文件中，然后在当前网页的head元素中用link元素引用

html

    
    
    
    
    
    



    
    
网页的标题
    
网页段落
    百度一下
    
hahah

CSS

/*指定css文件编码*/
@charset "utf-8"

/*单个选择器*/
h1{
    color: burlywood;
    font-size: 50px;
}
/* 并集选择器 */
h1,p,a{
    color:darkgreen;
}
/*类选择器*/
.red{
    color: red;
}

如果两个CSS文件中有相同的样式，后面的会层叠前面的。

CSS选择器（selector）

什么是CSS选择器

按照一定的规则选出符合条件的元素，为之添加CSS样式

归类

• 通用选择器（universal selector）
• 元素选择器（type selectors）
• 类选择器（class selectors）
• id选择器（id selectors）
• 属性选择器（attribute selectors）
• 组合（combinators）
• 伪类（pseudo-classes）
• 伪元素（pseudo-elements）

通用选择器（universal selector）

元素选择器（type selectors）

div{
            background-color: red;
        }

类选择器（class selectors）

.one{
            color: royalblue;
        }
        
我是div元素

class&id

class注意点

• 一个元素可以有多个class值，每个class之间用空格隔开
• class值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
• 最好不要用标签名作为class值

id选择器（id selectors）

id注意点

• 一个HTML文档里面的id值是唯一的，不能重复
• id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识
• 最好不要用标签名作为id值

设置网页图标

• link元素的rel属性不能省略，用来指定文档与链接资源的关系
• 一般rel若确定，相应的type也会默认确定，所以可以省略type
• 网页图标支持的图片格式是ico、png，常用大小是16x16、24x24、32x32（单位：像素）

驼峰标识

• 小驼峰: 第一个单词的首字母小写, 后面遇到一个单词首字母就大写
  • html class小驼峰
  • js 函数名字
• 大驼峰: 所有的单词首字母都大写
  • js中定义类的名字

span元素

• 默认情况下，跟普通文本几乎没差别
• 用于区分特殊文本和普通文本，比如用来显示一些关键字