【14】CSS基础(1)——认识CSS

【14】CSS基础(1)——认识CSS


一、产生背景

从HTML产生开始,样式属性就是存在的;随着HTML发展、设计者页面要求的增多、HTML又添加了很多样式属性、功能(比如文本格式化标签点击查看),但是HTML页面也变得越来越“臃肿”。
CSS便产生了,HTML结构与样式分离,不再混乱。


二、概念

(一)含义

1.CSS:cascading style sheet层叠样式表,是一种用来表示HTML样式的计算机语言;
2.作为前端三层(点击查看)中的样式层,从美观的角度描述页面样式;

(二)作用

1.静态地修饰网页,并且可以配合各种脚本语言动态地对网页各元素进行格式化;
示例:没有css的网页(部分)

示例:有css的网页(部分)


三、组成

(一)cascading层叠式

CSS中贯穿始终的加载特性:层叠性 、继承性;

(二)style样式

定义如何显示HTML元素(比如:文字文本、背景、盒模型、浮动、定位、其它)。


四、语法

(一)CSS规则概述(第三部分会详解)

选择器,以及一条或多条声明:
如下图

(二)代码书写位置

1.内联式

(1)含义及举例:

①内联式,也被习惯叫做行内式;
②书写位置:在 HTML 标签之上的style 属性中书写 CSS样式;
所有的 CSS样式属性总体组成标签的style属性的属性值。
如下示例

<div style="width:500px;height:500px;color:red;font-size:14px;">
  内联式/行内式书写位置如上在HTML的div标签内
</div>

(2)实际应用情况:

★实际工作不会使用内联式(行内式)编写CSS代码,原因如下:
内联式(行内式)缺点:
①内联式必须写在标签上,没有完全脱离 HTML 标签;
② css 样式代码让标签结构繁重,不利于 HTML 结构的解读;
③一个内联式的 css 代码,只能给一个标签使用,如果多个标签有相同的样式,同样的 css 代码需要书写多次,增加代码量。

2.内嵌式

(1)含义及举例:

①书写位置:在 HTML 文件中,<head>标签内部有一个<style>标签;
<style> 标签书写在< title> 标签后面,所有 CSS代码书写在<style>标签内部 ;
<style> 标签有一个标签属性叫做type,属性值是 “text/css”
如下示例
HTML常用标签中制作表格相关标签,合并单元格部分,迷宫图例子中<style>部分
点击查看迷宫图完整代码及浏览器显示效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> table {
      width :810px; height :810px; } td {
      text-align:center; } </style>
</head>
(2)实际应用情况:

★写单个文件练习的时候可以使用,比较方便,但是在写大项目的时候不便使用。原因如下:
内嵌式特点

①优点

a、实现了结构和样式的初步分离, css 只负责样式,HTML 负责结构;
b、多个标签可以利用一段代码设置相同的样式,节省代码量。

②缺点

a、结构和样式并没有完全分离,代码依旧书写在 HTML 文件的<style>标签内部;
b、css 样式只能给一个 HTML 文件使用,不能够被多个 HTML 文件同时利用;
c、在 HTML 中如果 css 代码太多,会造 成文件头重脚轻。`

3. 外联式

(1)含义及举例:

外联式 •外联式 CSS,也可以叫做外链式 CSS、外部 CSS。 •书写位置:在一个单独的扩展名为 .css 的文件中。 •书写语法:内部代码与内嵌式样式表中

(2)实际应用情况:

外联式优点 ①实现了 HTML 和 css 完全分离。 ②多个 HTML 文件可以共用一个 css 文件,便于提取公共 css,减少代码量。 ③可以实现一个 css 变化,多个 HTML 页面同时变化,减少工作量。 ④一个 HTML 文件可以引入多个 css 文件,可以实现同一个页面中 css 代码分层。

4.导入式

(1)含义及举例:

导入式 •书写位置:在内嵌式样式表

(2)实际应用情况:

导入式问题 •导入式样式表的作用与外联式样式表基本相同。 •但是由于导入式在浏览器中加载时,会在 HTML 结构加载完毕后再进行编译,如果 网速比较慢时,会导致网页出现没有 css 样式的效果,给用户的体验不好。 •实际工作中,较少使用导入式,推荐使用外联式样式表。

★书写位置总结

实际应用 •小型案例:可以使用内嵌式 CSS。 •实际工作、大型网站项目:推荐使用外联式 CSS。

(三)CSS规则详解

1.以内嵌式为例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css"> table {
      width: 810px; height: 810px; } td {
      text-align: center; } </style>
</head>

(1)所有的 css 代码都必须书写在<head>标签内部的一对 <style>标签内;
(2)css 在给某个标签设置样式前,必须使用选择器先选中标签;
(3)css 样式的属性,属性名和属性值的键值对写法为k:v;
(4)给每个选择器添加的样式属性都必须写在一对大括号 {}之内;
(5)给一个标签添加的所有需要的样式,都要在 {} 内部一一罗列出来。

2. 注意事项

(1)分号必要性:每条属性后面的分号必须写,如果不写,会导致后面所有的代码加载错误;
(2) css 中所有属性与属性之间对空格、换行、缩进不敏感。
以下二者等价

p { width: 300px; font-size: 14px; }
p { width: 300px; 
   font-size: 14px; }

(四)CSS注释语法

1.语法格式:

/*中间部分为注释内容*/

(五)习惯的代码风格

代码风格是实际开发中的书写方式,并非强制标准。

1.CSS样式格式

①展开格式:开发过程使用,代码可读性强,便于调错。

<styLe> div {
      width: 200px; height: 200px; background-color: skyblue; margin-bottom: 10px; } </styLe>

②紧凑格式:上传服务器时使用,减少不必要的空白字符,压缩文件大小,利于传输。

<styLe> div{
     width:200px;height:200px;background-color:skyblue;margin-bottom:10px;} </styLe>

2.英文大小写

CSS 中的英文可以使用大写,也可以使用小写;
★建议:css 中的选择器和样式属性名、属性值等都使用小写英文,特殊情况除外。

<styLe> /*大写*/ Div {
      width: 200px; height: 200px; } </styLe>
<styLe> /*小写*/ div {
      width: 200px; height: 200px; } </styLe>

3.空格规范(方便阅读)

①选择器与大括号 { } 之间保留一个空格;
② 冒号后面,属性值前面,保留一个空格。

<style> selector(空格){
      k:(空格)v; } </style>
<style> p {
      color: blue; } </style>

下篇继续:CSS基础(2)——选择器

全部评论

相关推荐

避坑恶心到我了大家好,今天我想跟大家聊聊我在成都千子成智能科技有限公司(以下简称千子成)的求职经历,希望能给大家一些参考。千子成的母公司是“同创主悦”,主要经营各种产品,比如菜刀、POS机、电话卡等等。听起来是不是有点像地推销售公司?没错,就是那种类型的公司。我当时刚毕业,急需一份临时工作,所以在BOSS上看到了千子成的招聘信息。他们承诺无责底薪5000元,还包住宿,这吸引了我。面试的时候,HR也说了同样的话,感觉挺靠谱的。于是,我满怀期待地等待结果。结果出来后,我通过了面试,第二天就收到了试岗通知。试岗的内容就是地推销售,公司划定一个区域,然后你就得见人就问,问店铺、问路人,一直问到他们有意向为止。如果他们有兴趣,你就得摇同事帮忙推动,促进成交。说说一天的工作安排吧。工作时间是从早上8:30到晚上18:30。早上7点有人叫你起床,收拾后去公司,然后唱歌跳舞(销售公司都这样),7:55早课(类似宣誓),8:05同事间联系销售话术,8:15分享销售技巧,8:30经理训话。9:20左右从公司下市场,公交、地铁、自行车自费。到了市场大概10点左右,开始地推工作。中午吃饭时间大约是12:00,公司附近的路边盖饭面馆店自费AA,吃饭时间大约40分钟左右。吃完饭后继续地推工作,没有所谓的固定中午午休时间。下午6点下班后返回公司,不能直接下班,需要与同事交流话术,经理讲话洗脑。正常情况下9点下班。整个上班的一天中,早上到公司就是站着的,到晚上下班前都是站着。每天步数2万步以上。公司员工没有自己的工位,百来号人挤在一个20平方米的空间里听经理洗脑。白天就在市场上奔波,公司的投入成本几乎只有租金和工资,没有中央空调。早上2小时,晚上加班2小时,纯蒸桑拿。没有任何福利,节假日也没有3倍工资之类的。偶尔会有冲的酸梅汤和西瓜什么的。公司的晋升路径也很有意思:新人—组长—领队—主管—副经理—经理。要求是业绩和团队人数,类似传销模式,把人留下来。新人不能加微信、不能吐槽公司、不能有负面情绪、不能谈恋爱、不能说累。在公司没有任何坐的地方,不能依墙而坐。早上吃早饭在公司外面的安全通道,未到上班时间还会让你吃快些不能磨蹭。总之就是想榨干你。复试的时候,带你的师傅会给你营造一个钱多事少离家近的工作氛围,吹嘘工资有多高、还能吹自己毕业于好大学。然后让你早点来公司、无偿加班、抓住你可能不会走的心思进一步压榨你。总之,大家在找工作的时候一定要擦亮眼睛,避免踩坑!———来自网友
qq乃乃好喝到咩噗茶:不要做没有专业门槛的工作
点赞 评论 收藏
分享
07-02 22:46
门头沟学院 Java
码农索隆:hr:“管你投没投,先挂了再说”
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务