本文共 2135 字,大约阅读时间需要 7 分钟。
文章目录
CSS第一课
- CSS简介
CSS和HTML一样,也是一种标识语言,代码也很简单,也需要通过浏览器解释执行,也可以用任何文本编辑器编写,其文件扩展名为“.CSS”。
- CSS主要功能
CSS的主要功能是美化页面,并且使得网页的内容和样似进行分离(类似于化妆,整容^^)。
使用方法
内联样式、行内样式
格式:
<标签名 style="CSS代码"> 第一个代码! 标签名>
例:
第一个代码
结:
这样的话,p里面的文字“第一行代码”的颜色color就会变成蓝色blue。内部样式
格式
Document
例:
结:
这样的话,p里面的文字的颜色color就会变成蓝色blue。外部样式
创建一个单独的CSS文件,在html的head标签中使用link标签引入,后两项是可选条件
格式:例:
在这里需要在外面创建一个CSS文件
p{ color: blue;}
结:
现在对css文件里面的条件进行添加,p标签的颜色也变成了蓝色。导入的方式
和link方式一样,但是有的浏览器不能用,所以不常用,了解即可
格式css文件不变
CSS的基本语法
CSS规则由两个主要的部分构成:选择器,以及一条或多条声明。
selector{declaration1;declaration2…declarationN}
选择器通常是你需要改变的样式的html元素。选择器包括多种形式,所有的html标签都可以作为选择符,如body p table等
每条声明由一个属性和一个值组成 property表示要格式化的属性的名称,value表示要格式化的属性的取值,每个属性有每个值。selector{property:value;property:value;…}
插入CSS样式表
格式:
CSS选择器{ 属性名:属性值; 属性名;属性值; ...}
例:
p{ color: blue;}
CSS特性
继承性
- 层叠性是指同一个HTML文件引用了多个样式表文件时,浏览器会按照样式定义的先后层次来应用样式,如果不考虑样式的优先级,一般都遵守“最近优先原则”。
- CSS样式对内容控制能力的基础就在于HTML文档结构图中的家族继承关系。
- 子级元素会继承父级元素的样式,并且只继承本身没有定义的属性。
标签选择器
标签选择器是指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。其基本语法格式如下:
标签名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }
使用标签选择器的优缺点
- 优点:能够快速为页面中同类型的标签统一样式。
- 缺点:不能设计差异化样式,有时候会相互干扰
类选择器
类选择器使用“.”(英文点号)进行标识,后面紧跟类名,其基本语法格式如下:
.类名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }
该语法中,类名即为HTML元素的class属性值,大多数HTML元素都可以定义class属性。类选择器最大的优势是可以为元素对象定义单独或相同的样式
方法
- 第一步:给需要设置样式的标签定义类名称,也就是给标签设置一个class属性,并给class属性赋值。赋的值就是类名称。
- 第二步:在CSS中使用类名称查找html文件中的对应标签。要在类名称前面添加黑色实点。
例:
这是类选择器的使用
类名注意
- 类名第一个字符不能使用数字,它无法在Mozilla或Firefox中起作用。
- 类名严格区分大小写,一般采用小写的英文字符。
- 不建议使用"_"下划线来命名CSS选择器。
- 尽量不缩写,除非一看就明白的单词。
相同的标签可以定义相同的类名称,不同的标签也可以定义成相同的类名称。
ID选择器
ID选择器使用“#”进行标识,后面紧跟ID名,其基本语法格式如下:
#ID名{属性1:属性值1; 属性2:属性值2; …属性n:属性值n; }
该语法中,ID名即为HTML元素的ID属性值,大多数HTML元素都可以定义ID属性,元素的ID值是唯一的,只能对应于文档中某一个具体的元素。
方法:
- 第一步:在html文档中,给某个标签设置id属性,然后给该属性设置属性值,属性值就是id名称。
- 第二步:在CSS文件中使用id名称作为选择器,但是需要在id名称前面添加#。 例:
#np1{ background-color: cyan; }
你好,世界!
注意:id名称在整个文档中是唯一的,不能重名。
* 在CSS是通配符,匹配任意标签。
例:*{ margin: 0;/*外边距*/ padding: 0;/*内边距*/ }
此为消除内外边距,以后会详细说一下的,此处略过。
编程我也是初学者,难免有写错的地方,希望大家看完之后,发现错误可以评论出来,谢谢大家
转载地址:https://lolly1023.blog.csdn.net/article/details/105269941 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!