美文网首页
4. CSS基础知识

4. CSS基础知识

作者: 石林涛 | 来源:发表于2017-04-10 11:55 被阅读0次

CSS的全称是什么?

Cascading Style Sheets, 层叠样式表。

CSS的引入方式

  • 有三种引入方式:
  1. 内联样式
    <h1 style="color: red; font-size: 20px;"></h1>
  2. 内部样式
<style type="text/css">
h1 {
 color: red;
 font-size: 20px;
}
</style>
  1. 外部样式
<head>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<style>
@import url("hello.css");
@import "world.css";
</style>
  • link 和@import的区别:
  1. link是HTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。
  2. 加载顺序差别。link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。
  3. link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
  4. ink支持使用Javascript控制DOM去改变样式;而@import不支持。

相对路径和绝对路径

路径 分类 描述
css/a.css 相对路径 当前目录下 css 文件夹中的 a.css 文件
./css/a.css 相对路径 当前目录下 css 文件夹中的 a.css 文件
b.css 相对路径 当前文件夹下的 b.css 文件
../imgs/a.png 相对路径 上级目录中的imgs文件夹里面的图片
/Users/hunger/project/css/a.css 绝对路径 本地路径中的a.css文件
/static/css/a.css 网络相对路径 当前服务器根目录下的a.css文件
http://cdn.jirengu.com/kejian1/8-1.png 网络绝对路径 网络上的图片地址

怎么在网站上展示图片?

  • 上传到服务器内部并用相对路径读取。
  • 直接用其他网站上的图片链接或上传到图床使用图床的绝对链接。
    语法:
    <img src = "myimage.gif" alt = "My Image" title = "My Image" >
    讲解:
  1. src:标识图像的位置;

  2. alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

  3. title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

  4. 图像可以是GIF,PNG,JPEG格式的图像文件。

html和 css 的书写规范

  1. 语法不区分大小写,但建议统一使用小写;
  2. 不使用内联的style属性定义样式;
  3. id和class使用有意义的单词,分隔符建议使用“-”;
  4. 有可能用就用缩写;
  5. 属性值是0的省略单位;
  6. 块内容缩进;
  7. 属性名冒号后面添加一个空格;
    更多规范请参考:https://github.com/fex-team/styleguide/blob/master/css.md

chrome 开发者工具的功能区介绍

相关文章

  • 4. CSS基础知识

    CSS的全称是什么? Cascading Style Sheets, 层叠样式表。 CSS的引入方式 有三种引入方...

  • web学习CSS6:float浮动

    1.CSS定位机制 普通流 元素的自动样式 2.CSS Float 的 基础知识 3.使用浮动后产生的问题 4.清...

  • CSS相关汇总

    CSS命名规范 CSS基础知识 CSS优化技巧 CSS的继承关系 CSS的选择器关系介绍

  • css基础

    1 、 CSS样式的基础知识 1 认识CSS样式 CSS全称为“层叠样式表 (Cascading Style Sh...

  • CSS 知识总结03

    1. CSS知识: i. CSS基础知识这里不作赘述,有兴趣自查 MDN Web文档。 ii.CSS----- ...

  • CSS基础知识

    CSS基础知识 css,英文Cascading Style Sheets,中文名:级联样式表。层叠样式表。 css...

  • 学习Vue框架之前,要有JavaScript的知识储备

    前端三剑客知识储备(有关前端的专题) ☑ HTML基础知识 ☑ CSS基础知识 ☑ JavaScript5基础知识...

  • Day03 CSS样式

    1. CSS文本 2.CSS字体 3. CSS链接 4. CSS列表 5. CSS边框 6. CSS表格 CSS如...

  • 基础知识--css

    基础知识--css 目录 选择器 在html引入css的方式 css盒子模型 选择器Selectors 基本选择器...

  • 一周一章前端书·第14周:《HTML与CSS进阶教程》S02E0

    第3章:CSS基础知识 3.1 CSS单位 3.1.1 绝对单位 CSS单位分为两大类:绝对单位 和 相对单位。绝...

网友评论

      本文标题:4. CSS基础知识

      本文链接:https://www.haomeiwen.com/subject/svksattx.html