首页 > web前端 > css教程 > 正文

一些CSS样式基础知识

jacklove
发布: 2018-05-21 11:24:43
原创
1936 人浏览过

在学习中会遇到一些css基础知识,本篇介绍一些CSS样式基础知识。

样式有几种引入方式? link 和 @import有什么区别

样式有三种引入方式,分别是:

外部引入式
主要是使用link标签或者@import标签从外部引入后缀名为.css的样式文件,语法分别是:

@import url(路径+###.css);

嵌入式
把样式写在当前标签内,语法是:

<style>
   p {color:red;    text-align:center;
 }</style>
登录后复制

内联式
在所要添加样式的开始标签内添加样式(不能在结束标签添加),语法为:

我是P标签内容

link 和 @import区别主要是:

浏览器加载先后区别。(先加载link,后加载@import)

link通用兼容性比@import要更好

link支持使用JS控制DOM去改变样式;而@import不支持

文件路径../main.css 、./main.css、main.css有什么区别

../main.css代表上级目录的main.css文件

./main.css代表当前目录main.css文件

main.css代表当前目录的main.css文件,相当于./main.css

console.log是做什么用的

console.log主要是来做开发调试用的,把所调试的对象显示在审查元素的控制台中。功能相当于:alert()(不是很理解,有待深入研究)

text-align: justify是什么

主要作用于大段文字排版中调整中间缝隙使两边对齐。

px、em、rem分别是什么?有什么区别?如何使用

px为像素单位,一般都是写死的,不会有别的干扰因素。

em与rem为相对单位,是多变的。em为相对父级元素的单位大小而产省变化,rem为相对根节点的元素单位产生变化。例如:

<!DOCTYPE html><html style="font-size:15px"> <!--这里是根节点,设置为15px--><head>
  <title>px.em.rem区别</title></head>
  <body>我是body内容  
  <h1>我是标题内容</h1>
  <div  style="font-size:2em;border:red 1px solid"><!--em相对于父级html,html为15px,2em相当于30px-->
  我是div内容  <p style="font-size:2em">我是em</p>  <!--em相对于父级div,div为30px,2em相当于60px--><p style="font-size:2rem">我是rem</p><!--rem是相对于根节点,根节点为15px,2rem相当于30px--></div></body></html>
登录后复制

本篇介绍了css样式的基础知识,更多相关内容请关注php中文网。

相关推荐:

一些关于JS的基础问题

如何用前端js模块化编写require.js

用CSS实现的一张图完成的按钮实例

以上是一些CSS样式基础知识的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板