css入门第一天

一丶Web标准
Web标准不是某一个标准,而是一系列标准的集合,内容与结构与表现形式的分离
网页主要有四个部分组成:内容(content),结构(structure), 表现(presentation)和行为(behavior)

1.内容:就是制作者放在页面内真正想要让访问者浏览的内容,如图片,音频。
2.结构:使内容更加具有逻辑性与易用性,更加清晰易懂。
3.表现:用于修饰内容的外观样式,使页面更加美观。
4.行为:网页的操作效果与交互,主要通过脚本语言完成,时间加动作。


二丶CSS:
即叠层样式表,简称样式表。

1.作用:减少重复格式化,减少页面体积,加快下载与反应速度。方便搜索引擎抓取到有用的内容,便于更新维护。浏览器干扰较少。

2.语法结构
css定义由三部分构成:选择器(selector),属性(properties)和属性取值(value)。

(1)基础结构:选择器{ 属性:属性值;属性:属性值;}。
注:css一般写在head部分,写在成对的<style>标签中,<style>标签可以设置一个type属性,值为text/css,告诉浏览器<style>中的内容是css样式。


3.三种引用方式:内联式,内部式,外联式。

(1)内联式(与Html标签相似):直接写在标签上。优点,快捷。缺点,不易维护
(2)内部式:写在head中的<style>标签中。
(3)外联式:先新建一个css文件并书写,然后在需要的文件中引入css文件
补:css优先级,行内样式>id选择器>类选择器>标签选择器。


4.选择器类型
css中,选择器是一种匹配模式,用于选择添加样式的目标对象,注:行内样式不需要选择器,内部和外联式需要选择器。
基本格式:选择器{属性:属性值}

(1)基本选择器:
a.类选择器:定义方法:.类的名称(自定义名称,不能以数字开头);调用方法:class=“类的名称”;
b.id选择器:定义方法:#ID名称;调用方法:id=“id名称”;
注:id和类的区别,id必须是唯一的,类可以重复多次使用。
c.标签(元素)选择器:定义方法:标签名称;一般用于批量格式化样式。
注:只能使用html内置的标签,这些标签是由w3c规定。
d.通用(*号)选择器:用于选择所有的html标签,通用的优先级低,一般用于初始化工作。
注意事项:真实项目中,先定义通用,再定义标签,然后定义类和id选择器。

(2)复合(关系选择符)选择器:
a.(并列关系):e1,e2,e3(并列关系,选择器之间共用同一个样式)
作用:将同样的的样式用于多个选择器,可以将选择符以逗号分隔的方式为组。对公共的的部分分隔。
b.(父子关系):e1>e2(父子选择器,不能隔代)
c.(后代关系):e1空格e2(后代选择器,可以隔代)
d.(相邻关系):e1+e2(相邻选择器,仅仅只选择下一个符合条件的相邻元素)
e.(兄弟关系):e1~e2(兄弟选择器,选择e1元素后面的所有兄弟元素)

(3)属性选择器:
a.:e1[attr],选择具有attr的属性的e1
b.:e1[attr=value],选择具有attr属性,并且值为value的e1.

(4)伪类选择器:
(a)丶e1:focus(焦点)
实例:
input:focus
{
background:#f6f6f6;
color:#f60;
}
(b)丶e1:after,选择器在被选元素内容后面插入内容。
(c)丶e1:before,选择器在被选元素内容前面插入内容。
通常使用content属性配合,来制定插入内容。

(重点)鼠标的四种状态:
作用:<a>标记,超链接有四种不同状态,未访问,已访问,鼠标悬停,当前点击的活动链接,css允许对于元素的不同状态,定义不同的格式化信息。

用法:
e:link,未访问。
e:visited,已访问。
e:hover,鼠标悬停。
e:active,选定的激活状态。

text-decoration属性:文本的修饰,当值为none,无下划线,值为underline,有下划线。


5.css继承与优先级
继承特性:html文档以树形结构组织,各元素之间具有层次关系,具有层次关系的元素之间,内层元素将继承外层元素的样式,多个外层元素中定义的样式将叠加到内层元素中。

能够继承的属性:文本的相关属性(如color,font-size,font-family,font-style, font-weight);列表的相关属性(如list-style,list-style-image)

css优先级:行内样式>id选择器>类型选择器>标签选择器,在选择器优先级相同时,采用就近原则。

当样式出现冲突时才会出现上列问题。

总结:学习时间过去将近一半,但目前我的学习进度相对较慢慢,对具体网页如何实现,还有存在很多细节不懂地方,接下来的时间,在保证学习质量的情况下,我的学习量应该适当增加了。

猜你喜欢

转载自www.cnblogs.com/1932178071-lyy/p/10708059.html