找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

只需一步,快速开始

css基础入门课程,有完整的资料可提供

查看: 3184| 评论: 0| 发布者: moonlight

??? ??С
简介:一. html中的空格合并现象.......................................................... 2 1 标签之间的关系:............................................................ 3 2 html中字符实体(特殊字符)的代 ...

一. html中的空格合并现象.......................................................... 2

1 标签之间的关系:............................................................ 3

2 html中字符实体(特殊字符)的代码:......................... 3

二. 没有语义的标签:.................................................................. 3

三. w3c标准:三层分离.............................................................. 4

四. css的学习:............................................................................ 5

1 css的初体验:.................................................................. 5

2 css相关的属性:.............................................................. 5

3 css(Cascading Style Sheets):层叠样式表................... 6

4 与字体相关的属性:........................................................ 6

5 如何通过浏览器查看页面元素的样式:......................... 7

6 与颜色的赋值:................................................................ 9

五. 简单选择器.............................................................................. 9

1 标签选择器:.................................................................. 10

2 类选择器:...................................................................... 10

3 id选择 器:.................................................................... 11

4 id选择器与类选择器之间区别:................................... 12

5 id与类名命名的规则:.................................................. 12

六. 其它选择器:........................................................................ 12

1 通配符:.......................................................................... 13

2 并集选择器:.................................................................. 13

3 交集选择器:.................................................................. 13

4 后代选择器:.................................................................. 14

5 子代选择器:.................................................................. 15

七. 注释:................................................................................... 15

八. css样式的三种类型:.......................................................... 16


Css基础入门

第1天课堂笔记(本课程共7天)


一. html中的空格合并现象(重点)

html中的对空格缩进换行不敏感,不管将来我们在页面的同一位置上写多少个空格、缩进、换行,将来浏览器在解析时候只会当作一个空格来解析。


1 标签之间的关系:

嵌套

并列

2 html中字符实体(特殊字符)的代码(了解):

空格:

<:<

>: >

版权:?

商标:?

二. 没有语义的标签:(重点)


div:

特点:

1.0单独占一行

2.0默认宽度占一整行,并且高度由内容决定

将来我们在进行页面布局的时候,用div用的最多(div+css,table布局)。

span:

特点:

1.0一行里面可放多个span标签。

2.0span标签的宽高由内容来决定。

三. w3c标准:三层分离(重点)


html : 从语义的角度来描述页面结构(结构)

在早期(w3c没有出三层标准之前,一般情况下写样式可以通过css,也可以通过html自带的一些样式相关的属性来描写)

css:从审美的角度,美化页面(表现)

js:从交互的角度,提升用户体验(行为)

html从语义角度,描述页面的结构:

语义的好处:

1.0让页面更加的友好,SEO会就收录页面更多的信息。

2.0将页面的结构更加的清晰,对开发人员友好。

3.0对用户体验好。

四. css的学习:


世界上的第一个html页面:

http://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html

1 css的初体验:

1.0所有与css相关的设置都放在style标签中,style标签是一个双标签,它放在head标签之中,在title标签下面。

2.0结构:

css基础入门课程,有完整的资料可提供


<style>

选择器 {

属性名1:属性值1;

属性名2:属性值2;

......



</style>

总结:css是用来给页面上的结构“穿上衣服”(设置样式)。

2 css相关的属性(重点):

color:设置字体的颜色。

font-size: 设置字体的大小。

background:设置背景颜色。

width:设置宽

height:设置高

3 css(Cascading Style Sheets):层叠样式表

html标签

css 属性

<style type=”text/css”>

p {

//属性

color: red;

属性键(名):属性值;===>键值对

}

</style>

4 与字体相关的属性(重点):

font-size(字体的大小):

设置时一般设置为具体的数值。

font-weight(字体的粗细):

可以设置具体的数值:

是整百的数100-900

400-noraml

700-bold

还可以设置一些关键字:

bold:加粗

normal:正常

font-family(字体的类型):

font-style(字体的风格):

字体的连写形式:

font: font-style font-weight font-size font-family;

注意: font-style与font-weight:是可选属性

5 如何通过浏览器查看页面元素的样式(重点):

1.0在浏览器中右键:查元素。

2.0在开发人员工具中选当前元素的标签:

3.0查看开发人员工作右侧的样式部分:

6 与颜色的赋值(了解):

没的font-color:属性

color:属性的取值可以是

1.0具体的颜色的英文单词

yellow,pink,red,green,blue

2.0使用十六进制颜色表示法:

#00 00 00=>#000

#003300=>#030

#FFEEDD==>#FED

#0094FF

十六进制:以“#”号开头,以六个数字给尾。

3.0rgb表示法:

rgb(100,100,100);

4.0rgba表示法:

rgba(100,100,100,0.5);

r:red

g:green

b:blue

a:透明度。0~1//0.1、0.2。。。

五. 简单选择器


选择器的结构:

选择器名 {

属性名1:属性值1;

属性名2:属性值2;

..... 此处省略很多属性

}

问题:现在追命有三兄弟,需要在页面上将四个人的名字以不同的颜色显示出来:

1 标签选择器(重点):

结构:

<style>

标签名(选择器) {

属性名1:属性值1;

属性名2:属性值2;

.......

}

</style>

效果:会将所有的这类标签都加上相同的属性。

优点:给所有的相同的标签都加上相同的属性。

缺点:如果页面上不是所有相同的标签都有相同样式,那么标签选择器就没有发挥的空间。

2 类选择器(重点):

给要设置的标签添加一个类名:class

例如:<p class=”zm”>追命</p>

结构:

<style>

.类名(选择器) {

属性名1:属性值1;

属性名2:属性值2;

.......

}

</style>

效果:会将所有拥有这个类名的那些标签都加上相同的属性。

3 id选择器(重点):

与类选择基本上相同:

结构:

<style>

#id名(选择器) {

属性名1:属性值1;

属性名2:属性值2;

.......

}

</style>

效果:会将所有拥有这个id名的标签加上相同的属性。

4 id选择器与类选择器之间区别(重点):

类名:相当于是人的姓名。(可以重复)

特点:

1.0一个类名可以设置给多个标签

2.0一个标签可以有多个类名

id名:相当于是身份证号码。(必须唯一)

特点:

1.0只能给一个标签设置这个id名

2.0一个标签只能有一个id名。

一对一的关系

id不是给css使用的,而是javascript来使用的。

5 id与类名命名的规则(了解):

命名的取值范围只能是:

0-9,a-z,A-Z,下划线(_),连接符(-),并且不能以数字开头或者连接符开头。

不能使用中文。

不要使用拼音。

六. 其它选择器:


1 通配符(重点):

代码:

<style>

* {

属性名1:属性值;

……

}

<style>

作用:会将页面上所有的标签都设置这个属性。会去页面上一个一个的遍历页面的标签,然后给他们进行设置(效率低)。

2 并集选择器(重点):

作用:就是将多个选择器的选中的集合进行合并将合并后的所有的元素设置对应样式。

css基础入门课程,有完整的资料可提供


3 交集选择器(了解):

css基础入门课程,有完整的资料可提供


交集选择书写的时候一定要注意:选择器的名称组成中如果有标签名那么标签必须写在最前面。

4 后代选择器(重点):

css基础入门课程,有完整的资料可提供


注意:读法是从右往左读。

找到一个p标签,这个p标签在father

5 子代选择器(第一代子元素选择器)(了解):

作用:找到一个标签的直接子元素来设置样式。

七. 注释:


效果:可以将页面上的一段代码让它失去作用。

应用:使用注释将页面的结构标注出来。

<!-- -->:html中的注释。

这个注释不能嵌套。

/**/:css中的注释。

快捷键:不管是html,还是css它们注释的快捷键都是ctrl+/;

八. css样式的三种类型:


1.0嵌套样式

css基础入门课程,有完整的资料可提供


2.0行内样式

css基础入门课程,有完整的资料可提供


3.0外联样式

新建一个文件,后缀叫.css,在这个文件中直接写样式(不需要加上style标签).在另一个页面引用的时候用加上:

<link rel=”stylesheet” href=”外联样式的路径”>

样式类型

作用范围

行内样式

只能作用在某一标签(用的比较少)

嵌套样式

只能作用于当前页面(页面的特定的样式)

外联样式

可以作用任意页面(公共的样式)


【免责声明】本文仅代表作者或发布者个人观点,不代表SEO研究协会网(www.seoxiehui.cn)及其所属公司官方发声,对文章观点有疑义请先联系作者或发布者本人修改,若内容涉及侵权或违法信息,请先联系发布者或作者删除,若需我们协助请联系平台管理员,邮箱cxb5918@163.com(本平台不支持其他投诉反馈渠道,谢谢合作)。若需要学习以上相关知识请到巨推学院观看视频教程,网址www.jutuiedu.com。

鸡蛋

鲜花

握手

雷人

路过
已有 0 人参与

会员评论

推荐阅读

    2020-06-02 18:56
  • 作者:wzx59

    PHP中跨域原理以及解决方案

    1.为啥出现跨域在制定Html规则时,为了安全的考虑,一个源的脚本(网页,网站)不能与另一个源的资源进行交互,所以就引发一个词叫做“同源策略”。所谓同源(即指在同一个域),就是两个页面具有相同的协议(protoc

  • 2020-06-02 18:56
  • 作者:seoxuexi

    干货分享!相见恨晚的4款电脑软件,让你的电脑更好用

    每个人电脑里都有各式各样的软件,有办公类、娱乐类、社交类的等等,一款优质的电脑软件,可以让我们的电脑更好用。今天就给大家分享4款相见恨晚的电脑软件,下面我们一起来看看吧!1、 字由字由是一款字体管理软件

  • 2020-06-02 18:26
  • 作者:seoxuexi

    小程序常见的七个推广引流方式

      到目前为止,相信不少企业都已经进行了长沙小程序开发,那么接下来企业要面对的就是,如何对小程序进行推广引流。只有如此,才能为小程序获取到更多忠实用户,使小程序实现更大的价值。有鉴于此,下面长沙小程序

  • 2020-06-02 18:25
  • 作者:Merv

    PC端最好用的优化清理软件,最新破解版助你远离国产流氓软件

    ||“印象小屋”所有资源均在微信公众号~~~【赵先森的藏宝库】免责声明【本文转载于网络仅供参考学习,如有侵权之处请联系删除】THANKS!首先,感谢所有支持本公众号的小伙伴们!也感谢此时正在看文章的你!有了你们

  • 2020-06-02 18:23
  • 作者:lantom

    「抖音」蓝V账号矩阵搭建及应用建议

    1、账号矩阵对于蓝V的优势A、增加品牌曝光;B、通过不同面向实现粉丝积累;C、提升在粉丝面前的活跃度,实现粉丝沉淀;D、通过账号组共同推动活动、tag获取流量;E、一个账号的内容可以作为团队的资源,实现价值最大

  • 2020-06-02 18:12
  • 作者:帅哥网

    《销售技巧》:干销售,这么说话,不成功都难

    情境1:你的价格太贵了1.1 错误应对1、价格好商量…2、对不起,我们是品牌,不讲价;1.2 问题诊断客户买东西时都会想要便宜点,这是客户的一个正常的消费心理,并不是决定他买不买的主要问题。销售人员在接待客户的

  • 2020-06-02 18:07
  • 作者:pmbmeuwpwi

    全省率先!温州出台5G基站建设审批“一件事”改革

    图片来自视觉中国5G基站建设审批,有了一套“温州标准”。5月30日,记者从温州市政务服务局了解到,温州率全省之先推行5G通信基站建设审批“一件事”改革,建立了全市统一、规范、高效的“一件事”审批机制,将审批

  • 2020-06-02 18:07
  • 作者:小仙

    又有女网红揭罗志祥真面目!小猪夜店撩妹对话细节大曝光

    近期娱乐圈最大的“瓜”要数周扬青发公开信曝光前男友罗志祥(小猪)私生活混乱一事。周扬青指罗志祥在与她恋爱的九年里一直对她不忠,与多名女性有不正当关系,甚至与一班好兄弟会开展“多人运动”,而这一切都是她

  • 2020-06-02 18:05
  • 作者:温柔在秋天

    抖音企业号团购配置指南

    一、行业准入要求特别注意:酒、烟、营养品、钟表、珠宝、医疗机构、医疗器械、药品、保健品、医疗服务、化肥农药、化工制品、消毒产品、化工材料、银行、证券、保险、信托、担保、期货、基金、征信机构、贷款、金融

  • 2020-06-02 18:02
  • 作者:alice99shen

    微信小程序切图给api接口设置统一域名

    微信小程序切图给api接口设置统一域名的意义重大,因为小程序api一般在同一个域名下,为了灵活和后期修改域名方便,是非常有必要把域名主体单独封装成一个变量去使用的,这里首先想到的就是app.js下的globalData。在

文章排行

TOP ARTICLES

返回顶部