我的前端之路 (css篇)

CSS基础篇

第一章


文章目录


前言

随着前端架构的不断发展,CSS这门技术也越来越重要,很多人都开启了CSS的学习之旅,本文就介绍了CSS学习的基础内容。

提示:以下是本篇文章正文内容,下面案例可供参考

一、CSS是什么?

CSS是Cascading Style Sheet的缩写,层叠样式表,是一种用来表现文件样式的计算机语言。


二、css能做什么

简单来说就是装饰html、排版布局,但又可以细化为以下几点

1.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

2.CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式。

3.CSS拥有对网页对象和模型样式编辑的能力。

4.在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色等效果实现更加精确的控制。


三、怎么做?

1.内联样式

顾名思义,内联样式可称为行内CSS或者行级CSS,它直接在标签内部引入,显著的优点是十分的便捷、高效;但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用,可以查找代码中bug。

<div style="color: red;">这是div</div>
//缺点:把样式和html标签混合在一起,可读性教差

2.局部样式

局部样式可称为内部CSS或者页级CSS,整体是放在head标签里边的,在style标签里边定义样式,作用范围和字面意思相同,仅限于本页面的元素;如果你写的代码超过了几百行,想想每次把代码页拉到最上边都很烦,所以它在可维护性方面较差。

 <style type="text/css">
     div {
         width: 65px;
         height: 20px;
         border: 1px solid;
         background: greenyellow;
         }
 </style>

3.外联样式

外联样式可称为外部CSS,在实际的项目中通常使用此种方式,它只在页面中使用link或者@import引入即可,可维护性好;并且外联CSS是一个单独的文件,可以作用于多个页面,在修改的时候可以针对性地修改某一块区域,达到多个页面样式同时变更,相较于内联CSS和页级CSS,省去了到每个页面修改的步骤,提高了开发效率,同时一定程度提高了性能。

  (1)link:
  <link rel="stylesheet" type="text/css" href="*.css" />
  
  (2)@import:
  <style>
    @import url("*.css");
  </style>
// 那么有人可能会问了? 这里有两种方式? 他们有什么区别呢? 、

  link是HTML提供的标签,不仅可以加载CSS文件,还可以定义RSS,rel连接属性等
  @importCSS提供的语法规则,只有导入样式表的作用
// link语法格式中,rel指的是关联(relation),type指的是类型,href指的是链接文件路径。
// link的作用主要用来引入CSS和网页图标,指示告知搜索引擎,网页之间的关系等。

//加载顺序
  加载页面时,link引入的CSS被同时加载,@import引入的CSS将在页面加载完毕后加载

//兼容性
  link标签作为HTML元素,不存在兼容性问题,而@importCSS2.1才有的语法
  故老版本浏览器(IE5之前)不能识别

//可操作性
  可以通过JS操作DOM,来插入link标签改变样式
  因为DOM方法是基于文档的,所以无法使用@import方式插入样式
  
link和@import都没有放置顺序的要求,但是不同的放置位置可能会造成效果显示的差异。
对于link,无论放到哪个位置,都是一边加载数据,一边进行优化,视觉感受很好
而对于@import,放置到哪里,才从哪里开始加载CSS样式,即先加载数据,然后加载样式
如果网速不佳,可能会造成只有数据出来,而样式一点点加载的效果。
**并且在同一个页面中,调用两种方式,link永远比@import优先级高**。

在项目中使用的时候,一般在页面中调用方式为link,并且放在head标签中;
使用@import除了在CSS文件中,在页面调用时,一般加载第三方的样式会使用到,
并且需要放置在页面的底部,不会影响自己的网站。

四、样式的选择器

1.什么是选择器?

(1)Css属性选择器又被称为css样式属性、css选择器

(2)选择中标签的某个元素,然后給它添加上相应的样式

2.选择器的标准结构

选择器{样式}

 div {
      width: 65px;
      height: 20px;
      border: 1px solid;
      background: greenyellow;
      }

3.常见选择器有哪些?

(1)元素选择器

div{
 color: blue;
}
a{
 font-size: 30px;
}

(2)id选择器

<div id="a">div1</div>
<div id="b">div2</div>
//css
#a{
 color: red;
}
#b{
 color: blue;
}

(3)类选择器(class)

<div class="a">div1</div>
<div class="b">div2</div>
//css
.a{
 color: red;
}
.b{
 color: blue;
}

(4)id选择器和类选择器(class)的区别

1,w3c规定,一个页面只能使用一次同一个id,而class可以使用多次
2,不能多个id同时作用于一个元素,而class可以
<div id="a b">div1</div>
<div class="a b">div4</div>
**w3c规定,块级元素比行内元素高级,块级元素不能放在行内元素的里面**

(5)后代选择器

ul li{
 color: red;
}
ul li a{
 color: red;
}

(6)指代选择器

//控制第一个li
ul li:nth-child(1){
 background: blue;
}
//控制奇数的li
ul li:nth-child(odd){
 background: blue;
}
//控制偶数的li
ul li:nth-child(even){
 background: blue;
}

(7)连接选择器

div+p+div+p{
 background: blue;
}

(8)属性选择器

a[href="www.baidu.com"]{
 background: blue;
}
//以cn为结尾的选择器
a[href$="cn"]{
 background: blue;
}
//以www为开头的选择器
a[href^="www"]{
 background: blue;
}

(9)通配符选择器

*{
 color: red;
 margin:0;
 padding:0;
}
// 一般用于设置公共样式

五、 选择器的命名规则

1)不能以数字为开头或者纯数字

2)识别大小写

3)特殊符号里面,只有下划线可以使用

4)使用两个英文单词时,两种写法,第一种驼峰式,第二种中划线式


六、选择器的优先级

1)同个选择器下后面的样式会覆盖前面的样式

2)作用范围越小,优先级越高

总结排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

总结

以上就是今天要讲的内容,本文仅仅简单介绍了css基础内容的梗概,而ccs库提供了大量能使我们快速便捷地装饰html、排版布局的属性,而我这仅仅简单说明了其的使用方法,剩下的属性样式由于篇幅的问题就不再本篇说明,关于常用的样式属性可以看我之前的文章。如有雷同,纯属意外

指导:JUN

文献来源

《css教程(w3school)》

《我的前端之路》

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一份前端Vue男生的简历范例: 个人信息: 姓名:张三 性别:男 出生年月:1995年1月 联系方式:电话 13812345678,邮箱 zhangsan@email.com 教育背景: 2013年9月-2017年6月 XX大学 计算机科学与技术 本科 工作经历: 2017年7月-2018年8月 XX科技有限公司 前端工程师 工作描述: - 负责公司多个Web项目的前端开发工作,使用Vue框架完成页面编写及交互逻辑设计 - 使用Webpack进行前端代码打包与构建,并负责项目的部署与维护 - 与后端工程师协作,完成API接口设计与开发 - 参与公司内部的前端技术分享会议,并持续学习前端新技术 2018年9月-至今 XX互联网有限公司 高级前端工程师 工作描述: - 负责公司Web项目的前端开发工作,使用Vue框架和Element UI库完成页面编写及交互逻辑设计 - 负责构建前端代码的打包和部署,并进行性能优化,提高页面加载速度和用户体验 - 与设计师协作,完成页面的UI设计和切图工作 - 参与公司内部前端团队的技术分享和培训,分享Vue框架、Webpack、ES6等前端开发技术 专业技能: - 熟练掌握HTML/CSS/JavaScript等前端基础知识 - 熟练掌握Vue.js前端框架及相关插件库(如Vuex、Vue Router、Element UI等) - 熟练使用Webpack进行前端代码打包和构建 - 熟悉ES6语法,能够运用Promise、async/await等异步编程技术 - 熟悉Node.js和Express框架,了解RESTful API设计 - 了解微信小程序开发技术,有相关项目经验 个人特质: - 具有较强的学习能力和团队协作能力,能够独立解决问题 - 注重代码规范和可维护性,有良好的编码习惯 - 热爱前端开发工作,有较强的自我驱动力 希望以上简历范例能够对您有所帮助,祝您求职顺利!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值