资讯专栏INFORMATION COLUMN

HTML 1-样式引入、路径、尺寸单位

laoLiueizo / 2528人阅读

摘要:样式的引入方式样式的引入有三种方式内联式,可直接写在标签内,一般不建议这种写法。调试介绍主要用于对程序调试,相比于,仅在控制台中打印相关信息,不会阻断程序的执行。

CSS样式的引入方式

css样式的引入有三种方式:
1.css内联式,可直接写在html标签内,一般不建议这种写法。

这里文字是红色

2.css嵌入式,CSS代码写在

3.css样式导入,link和import方式
【1】.link链接
【2】.import导入
注:三种css引入方式的优先级,内联式》嵌入式》导入式。嵌入式>导入式有一个前提:嵌入式css样式的位置一定在外部式的后面。一般将代码写在嵌入式的前面(实际开发中也是这么写的)。其实总结来说,就是就近原则(离被设置元素越近优先级别越高)(引入css样式、A链接使用href,引入其他的图片,js代码使用src)
link和import方式的区别:
link和@import的最根本区别就是,link是一个html的一个标签,而@import是css的一个标签。link属于XHTML标签(功能不局限于导入CSS),而@import则是CSS提供的一种规则(CSS2.1提出的规范,老浏览器不兼容)。
【1】@import url()机制是不同于link的,link是在加载页面前把css加载完毕,所以显示出来的页面从开始就是带样式效果的;而@import url()则是读取完文件后再加载样式,所以会出现一开始没有css样式,闪烁一下出现样式后的页面(网速慢的情况下)。
【2】使用javascript控制dom改变样式的时候只能使用link标签,@import导入的样式不受dom控制其样式。


文件路径,绝对路径和相对路径

../main.css 、./main.css、main.css、/main.css有什么区别

../main.css 相对路径,指向当前所在目录的上级目录下的main.css文件

./main.css 相对路径,指向当前所在目录下的main.css文件

main.css 绝对路径,指向当前所在目录下的main.css文件

/main.css 绝对路径,指向根目录下的main.css文件


text-align的作用

text-align有5个值,left/right/center/justify/inherit,左对齐/右对齐/居中对齐/两端对齐/继承父元素align值。justify两端对齐的时候,每行中的字间距可能不一致。


css尺寸单位,px、em、rem

px像素单位,em、rem相对单位,em(相对父元素字体大小的倍数,父元素不存在时继续向上层找其父元素,如找不到则以浏览器默认字体16px大小为基准) ,rem(相对于HTML根节点元素字体大小的倍数)。对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px即可。 对于需要适配各种移动设备,推荐使用rem
1.px:是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽、比例有可能会不同。假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个div宽度为100px,你显示器上看这个div是10厘米,我显示器上看是20厘米。另外一个px点的长宽不一定是1:1的正方形,有的设备上长宽比是不一样的。IE无法调整那些使用px作为单位的字体大小。
2.em:所有现代浏览器下默认字体尺寸是16px。这时1em=16px。然后你人为的把body里面定义font-size:12px;(把浏览器默认16px改小了),此刻1em=12px,如果是0.8em则实际等于12px*0.8。em的用处是你要整个网页字体统一变大变小你只要改body里面font-size的值就行了.



    
      我大小为16px;
      

此段落文字大小为12px(16×0.75); 我大小是2em,即24px,这里是相对父级字号×2的,而不是相对body里面的16px

3.rem em相对父级,嵌套层多了算字体大小很麻烦。所以有了Rem(IE6-8不支持),他只相对html根元素字体尺寸(默认还是16px,除非你自己用font-size定义其他大小),rem没有了继承父级尺寸这个关系。通过rem既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。比如默认的html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem),实际开发中为了便于计算,我们改变一下html的默认font-size=10px不就好计算了(10÷16=62.5%)!再将原来的px数值除以10,然后换上em作为单位。对于不支持rem的浏览器,应对方法也很简单,就是多写一个绝对单位PX的声明。这些浏览器会忽略用rem设定的字体大小。

html{
    font-size:62.5%; 
}

body{
    font-size:12px;
    font-size:1.2rem ; 
} 
p{
    font-size:14px;
    font-size:1.4rem;
} 

如下代码,设置 p为几 rem,让h1和p的字体大小相等?

  

title

title

浏览器默认字体大小为16px,代码中html标签样式font-size:62.5%设置字体大小为62.5%,即0.625×16=10px,所以当前浏览器默认的字体大小被修改为10px。rem基于HTML根元素字体大小为参考,p标签中的font-size设置为6rem时(6rem×10)即为60px,可与h1标签字体大小相同。


chrome 调试介绍

console.log主要用于对JavaScript程序调试,相比于alert(),console.log仅在控制台中打印相关信息,不会阻断JavaScript程序的执行。console.log()可以接受任何字符串、数字和JavaScript对象。与alert()函数类似,console.log()也可以接受换行符n以及制表符t。console.log()语句所打印的调试信息可以在浏览器的调试控制台中看到。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/52375.html

相关文章

  • HTML 1-样式引入路径尺寸单位

    摘要:样式的引入方式样式的引入有三种方式内联式,可直接写在标签内,一般不建议这种写法。调试介绍主要用于对程序调试,相比于,仅在控制台中打印相关信息,不会阻断程序的执行。 CSS样式的引入方式 css样式的引入有三种方式:1.css内联式,可直接写在html标签内,一般不建议这种写法。 这里文字是红色 2.css嵌入式,CSS代码写在标签中并放在head标签内 p{ font-si...

    Shihira 评论0 收藏0
  • 前端复习笔记

    摘要:一基本结构设置字符编码集格式网页头部二文本标记加粗倾斜下划线删除线上标下标三引用样式表的方式内联样式在元素的开始标签里,设置一个属性,并设置对应的属性名及属性值例使用场景里,使用给元素添加样式内部样式表在标签里加上一对标签,并且在标签设置对一、基本结构 //设置字符编码集格式 // //网页头部 二、文本标记1.加粗 b2...

    yhaolpz 评论0 收藏0
  • 前端知识点总结——CSS

    摘要:父元素没有上边框为子元素设置上外边距时在中嵌套一个子元素设置其尺寸为,并设置其背景颜色设置的上外边距为观察其结果。 前端知识点总结——CSS 1.CSS的概述 1.什么是CSS? CSS:Cascading Style Sheets层叠样式表,级联样式表(简称:样式表) 2.作用 设置HTML网页元素的样式 3.HTML与CSS的关系 HTML:负责内容的展示 CSS:负责内容(元素)...

    nicercode 评论0 收藏0
  • PHPWord中文手册整理

    摘要:修正中文支持的问题,使用前如果发现乱码,需要进行一些修正解决编码问题,会对输入的文字进行编码转化,如果你使用或者编码的话就会出现乱码,如果你用编码,就查找类库中所有方法中的转码将其删除,如果你采用或者编码,使用进行编码转换。 修正 中文支持的问题,使用前如果发现乱码,需要进行一些修正: 解决编码问题,PHPword 会对输入的文字进行utf8_encode编码转化,如果你使用GBK、...

    wangdai 评论0 收藏0
  • 响应式布局的实现

    摘要:响应式布局的概念响应式布局,即,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。框架实现响应式布局利用中栅格系统可以简单实现响应式布局,这里就需要去理解一下啥是栅格系统代表在端上显示在一行的个栅栏,也就是一半。 响应式布局的概念 响应式布局,即 Responsive design,在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏...

    syoya 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<