第六章——css部分:基本属性与CSS

微信图片_20170519141700

一、标签属性与样式

1、网页内容根据想要在作用选择对应在标签

2、找到对应在标签,敲空格看提示,选择对应在单词(或style)来描述该标签。

直接能够敲的出来我们成为属性(attribute),类似于字体在color等。

敲不出来的,称为细节,确切的说叫样式Style。

<font size="+1" style="font-size:10px;">测试文字</font>

 

TIPS:样式比属性更能精确、多样的控制标签的表现形式

二、CSS介绍:

Cascading [Kæs'keɪdɪŋ] Style Sheet,层叠样式表。

三、选择器:

1、标签选择器

控制对应的标签,通过标签的关键字

<font>测试文字</font>

<font>abc</font>

<font>def</font>

<style type="text/css">

/*  标签选择器 */

font{

color:red;

font-size:20px;

font-family:"华文行楷";

}

</style>

TIPS:所有对应的标签都会生效,其中某些不想生效,还需要使用

 

2、类(class)选择器

<font class="c1">测试文字</font>

<font class="c1">abc</font>

<font class="c2">def</font>

<style type="text/css">

/* 类选择器,先以.选择器名定义,然后使用该定义在标签加上class="定义类选择器名" */

.c1{

color:red;

font-size:20px;

}

 

.c2{

color:blue;

font-size:30px;

}

</style>

 

3、ID选择器

<font id="c1" >测试文字</font>

<font >abc</font>

<font >def</font>

<style type="text/css">

/* ID选择器,以#选择器名定义,对应的标签通过ID来调用  */

#c1{

color:green;

font-size:18px;

}

</style>

TIPS:建议ID选择器尽量不要重复使用;尽享减少ID选择器的定义和使用,避免和代码冲突。

四、CSS使用方式

1、行内:找到对应的标签,通过style=”描述;”

2、内嵌:通过<style></style>潜入到<head></head>中

3、外链:先写内嵌,然后内嵌的样式代码除了<style></style>以外,全部剪切到单独的CSS文件中(命名要和对应的前台页面一致),前台页面删除<style></style>在<head></head>中写<link href=”地址” rel=”stylesheet”>。

TIPS:

1、外间文件中,可以@charset “gbk”

 

五、CSS优先级

1、属性和样式,样式优先;

2、行内>内嵌>外链

 

六、字体常用属性样式案例:

Size:大小,默认为3,默认12PX,可以使用+放大,- 缩小,最多不会超出+7,超出会以最大或最小来显示;

色彩 Color: #ffffff red rgba(0,0,255,255)
字体大小 font-size: 单位尺寸(像素px)
字体粗细:font-weight
字体修饰 text-decoration: underline、line-through、overline、none  同样的样式无法多次使用,重复使用一般解决方案是嵌套。

<font style="text-decoration:underline;"><font style="text-decoration:line-through;">abc</font></font>
大小写 text-transform: capitalize首字母 uppercase大写 lowercase小写   对中文无效。

作业:写3段英文,每段话,第一个英文单词全部转换为大写。
单行文本行高 line-height

某些人在做一些事情<br />

<font style="line-height:50px;">某些人在做一些事情</font><br />

某些人在做一些事情

本文来自投稿,不代表科技代码立场,如若转载,请注明出处https://www.cwhello.com/2244.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
上一篇 2017年5月19日 14:04
下一篇 2017年5月23日 00:00

相关推荐

  • 前端开发工程师眼中网站设计的功能性。

    做 VALSE 2016 网站的时候,没有设计师的参与。在这种情境下要做出网站,只好考虑从功能性出发写网站,而在这个过程中,开始思考前端工程师的工作起点到底是不是设计稿,并以此看到了可能可以 让前端工程师脱离设...

    2022年7月4日 建站资讯
    0131
  • 自学也都能学会CSS,还参加DIVCSS5培训班?

    自学也都能学会CSS,为什么还参加DIVCSS5培训班? 自己通过自己努力可以学会DIV CSS布局技术,但需要不断摸索,牵扯问题特别多,干扰问题也比较多,这样会导致学习进度相当慢,进步也自然慢。 参加DIVCSS5开始的C...

    2015年12月1日
    0350
  • 一个成熟的前端开发者都需要哪些知识。

    首先,成为一名成熟的开发者,首先必是一位有基础的开发。 所以最基本的一些HTML、CSS、JavaScript这些基础的语法,就不详细说了。 扎实的JavaScript基础 在前端开发里,最讲究的还是在JS里,基础的语法,能运用...

    2022年7月4日 建站资讯
    0174
  • css+div布局学习路线!

    自学CSS+DIV布局步骤 一、认清目的 首先要认识为什么要学习CSS,知道学习CSS目的是什么。 认识学习目的才能坚持持之以恒、认识学习目的才有目的性从中得到乐趣和享受! 二、基础学习 1、了解CSS作用是什么? 2、c...

    2017年11月7日
    0208
  • 7个教程和工具让你开始使用CSS网格。

    自从CSS Grid的出现它就变得很受欢迎,它甚至被我们行业最新的官方流行语所引用。谈论着它是未来的网页设计和布局。我可以滔滔不绝地说,当狂热发生的时候,没有使用网格的人会被抛在后面,维基百科的互联网先驱...

    2023年2月14日
    01
  • HTML、CSS、JavaScript分别实现什么功能。

    学习Web前端开发基础技术需要掌握:HTML、CSS、JavaScript,那么这三个都是分别实现什么功能的呢?下面和子瑜一起来看看吧! 一、HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以...

    2022年7月4日 建站资讯
    02.0K
  • 学习前端技术栈ServiceWorker,让你的网页变快20%。

    有些人会认为,前端不就是切图然后展示么,有什么技术含量,学前端不如学习Php,此言差矣,这些年随着互联网的发展,前端技术变得越来越重要,生态圈也越来越发达,今天我们来介绍一个前端技术栈,ServiceWorker...

    2022年7月4日 建站资讯
    0136
  • 使用css的border属性实现三角形

    使用css的border属性实现三角形 1. border使用方法 2. border 三角形 2.1. 三角形原理,我们来看一个普通的底部边框 2.2. 我们在右边添加一个边框,细心留意两个border的交界就是一个斜线 2.3. 我们在左边边添加...

    2018年5月7日 css自学教程
    0576

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息