css入门第一天

时间:2020-12-07 00:44:17

一丶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选择器>类型选择器>标签选择器,在选择器优先级相同时,采用就近原则。

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

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

css入门第一天的更多相关文章

  1. HTML与CSS入门——第一章 理解Web的工作方式

    知识点: 1.万维网的简史 2."网页"的含义,以及该术语不能反映所涉及的所有内容的原因 3.如何从你的个人计算机进入别人的浏览器 4.选择Web托管提供商的方法 5.不同的Web ...

  2. 00&lowbar;HTML入门第一天

    HTML入门 body标记的常见属性:bgcolor 设置背景颜色:text 设置文本颜色:link 设置链接颜色:vlink 设置已经访问了的链接颜色:alink 正在点击的链接颜色: meta是单 ...

  3. 胖虎都看得懂的CSS入门

    CSS入门 CSS是什么 摘自* 层叠样式表(英语:Cascading Style Sheets,简写CSS),又称串样式列表.级联样式表.串接样式表.层叠样式表.階層式樣式表,一种用来为结构化 ...

  4. 【Python全栈-CSS】CSS入门

    CSS入门教程 参考: http://www.cnblogs.com/yuanchenqi/articles/5977825.html http://www.ruanyifeng.com/blog/2 ...

  5. H5教程(二),CSS入门(一)选择器

    这是我的第二篇博客,H5教程CSS入门,适合刚开始学习H5的新手,让我们共同进步. 1.  CSS简介 1.1  CSS是什么? CSS称为样式层叠表,是用于增强或控制网页样式,并允许将样式信息与网页 ...

  6. 【干货】Html与CSS入门学习笔记4-8

    四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...

  7. html与css入门经典视频教程 千锋说要这样学

    PHP初学者看过来,老师带来的PHP入门经典视频教程,带你轻松入门,学习PHP就是这么简单. 很多人不理解为什么学习PHP要先学习HTML基础和CSS,其实PHP作为服务器的脚本语言,在开发过程中用于 ...

  8. Django入门第一步:构建一个简单的Django项目

    Django入门第一步:构建一个简单的Django项目 1.简介 Django是一个功能完备的Python Web框架,可用于构建复杂的Web应用程序.在本文中,将通过示例跳入并学习Django.您将 ...

  9. JAVA入门第一季(mooc-笔记)

    笔记相关信息 /** * @subject <学习与创业>作业1 * @author 信管1142班 201411671210 赖俊杰 * @className <JAVA入门第一季 ...

随机推荐

  1. php换行符

    1.需求 统一php换行符 2.实践 使用PHP_EOL替换换行符,保证平台的兼容性. 类似的有DIRECTORY_SEPARATOR 参考文档:http://www.cnblogs.com/code ...

  2. select distinct

    select distinct select distinct 用于返回表中唯一不同的值. 语法 select distinct 列名称 from 表名称 使用 distinct 关键字 Studen ...

  3. aop aspect

    所以“<aop:aspect>”实际上是定义横切逻辑,就是在连接点上做什么,“<aop:advisor>”则定义了在哪些连接点应用什么<aop:aspect>.Sp ...

  4. Loading Data into HDFS

    How to use a PDI job to move a file into HDFS. Prerequisites In order to follow along with this how- ...

  5. C&num;之获取本地IP地址

    最近协助一个项目解决了一个获取IP地址的问题,手机客户端与WebService进行通讯,然后WebService通过TCP通讯把指令传递到另一台PC机上.在测试的过程中,总是会出现WebService ...

  6. 高仿精仿微信应用ios源码下载

    微信,超过3亿人使用,能够通过手机网络给好友发送语音.文字消息.表情.图片和视频,还可以分享照片到朋友圈.通过摇一摇.查看附近的人,你可以认识新的朋友.使用扫一扫,你可以扫描二维码.条码.图书和街景. ...

  7. ASP&period;NET Core API 版本控制

    几天前,我和我的朋友们使用 ASP.NET Core 开发了一个API ,使用的是GET方式,将一些数据返回到客户端 APP.我们在前端进行了分页,意味着我们将所有数据发送给客户端,然后进行一些dat ...

  8. 【Nuxt】配置路由

    export default ({store, redirect} => { if (!store.state.username) { redirect('/') } }) vuex 代码处理请 ...

  9. Android 开发 CoordinatorLayout 协调者布局 与 ConstraintLayout约束布局 两者的关系

    在摸索新技术是发现CoordinatorLayout 与 ConstraintLayout 会有冲突关系,所以就研究了一下他们之间的不兼容,被影响的方面.其实某种程度上来说是CoordinatorLa ...

  10. Department and Student

    软工结对作业之二 本人ID:杨光海天 031502634 队友(大佬)ID:陈涵 031502106 GitHub链接 BIN文件地址 代码文件 整体概况 模型建立 学生类,属性包括: * 1)编号 ...