CSS基础篇

第一章

文章目录

CSS基础篇
前言
一、CSS是什么？
二、css能做什么
- 1.CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
- 2.CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式。
- 3.CSS拥有对网页对象和模型样式编辑的能力。
- 4.在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色等效果实现更加精确的控制。
三、怎么做？
- 1.内联样式
- 2.局部样式
- 3.外联样式
四、样式的选择器
- 1.什么是选择器?
- - （1）Css属性选择器又被称为css样式属性、css选择器
  - （2）选择中标签的某个元素，然后給它添加上相应的样式
- 2.选择器的标准结构
- 3.常见选择器有哪些？
- - （1）元素选择器
  - （2）id选择器
  - （3）类选择器(class)
  - （4）id选择器和类选择器(class)的区别
  - - 1，w3c规定，一个页面只能使用一次同一个id，而class可以使用多次
    - 2，不能多个id同时作用于一个元素，而class可以
  - （5）后代选择器
  - （6）指代选择器
  - （7）连接选择器
  - （8）属性选择器
  - （9）通配符选择器
- 五、选择器的命名规则
- - 1)不能以数字为开头或者纯数字
  - 2)识别大小写
  - 3)特殊符号里面，只有下划线可以使用
  - 4)使用两个英文单词时，两种写法，第一种驼峰式，第二种中划线式
- 六、选择器的优先级
- - 1)同个选择器下后面的样式会覆盖前面的样式
  - 2)作用范围越小，优先级越高
总结
文献来源

前言

随着前端架构的不断发展，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连接属性等@import是CSS提供的语法规则，只有导入样式表的作用
// link语法格式中，rel指的是关联(relation)，type指的是类型，href指的是链接文件路径。
// link的作用主要用来引入CSS和网页图标，指示告知搜索引擎，网页之间的关系等。//加载顺序加载页面时，link引入的CSS被同时加载，@import引入的CSS将在页面加载完毕后加载//兼容性link标签作为HTML元素，不存在兼容性问题，而@import是CSS2.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)》

《我的前端之路》

我的前端之路 (css篇)相关推荐

(:◎)≡前端学习之CsS篇
前端学习之CSS篇 1.CSS简介 2.CSS语法规范 3.CSS选择器 (1)标签选择器 (2)类选择器 (3)id选择器 (4)通配符选择器 (5)选择器总结 4.CSS字体属性 5.CSS文本属 ...
前端面试笔记-CSS篇
目录选择器的权重和优先级盒模型标准盒模型和替代模型(IE) 块级盒子与内联盒子隐藏一个元素 Position 文档流定位 z-index 浮动如何清除浮动包含块与控制框 BFC 外边距折 ...
web前端技术杂谈--css篇(1)--浅谈margin(续)
2019独角兽企业重金招聘Python工程师标准>>> 1.margin负值实现左右两列布局(左边固定宽度,右边自适应)代码如下: css代码: .main{ ...
前端进阶试题-CSS篇
人呐都不知道,自己不可以预料. 一个人的命运啊,当然要靠自我奋斗.但是也要考虑历史的行程. 我绝对想不到我一个学设计的,怎么就开始写代码了呢? 但是经理同志对我讲:公司已经研究决定了. 后来我念了两首 ...
web前端学习（CSS篇）
目录 CSS基础语法基本样式内联样式与内部样式内联样式外部样式及两种写法 CSS中的颜色表示法 CSS背景样式背景实现视觉差效果 CSS边框样式边框实现三角形 CSS文字样式 CSS段落样 ...
前端学习随笔 css篇
CSS css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部引入,比较三种方式的优缺点. 语法:style = ...
前端管中窥豹之CSS篇
一.CSS简介 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中,是为了解决内容与表 ...
前端面试之 CSS 篇
一.CSS基础 1. CSS选择器及其优先级 | 选择器 | 格式 | 优先级权重 | | - | - | - |-| | id选择器 | #id | 100 | | 类选择器 | .classnam ...
前端三剑客之CSS篇~一篇文章带你熟练使用CSS来定义页面样式
目录 CSS基本概念基本语法规范引入方式 CSS选择器基础选择器复合选择器 CSS常用元素属性字体属性文本属性背景属性 CSS基本概念 CSS即层叠样式表,能够对网页中元素位置的排版进行 ...

我的前端之路 (css篇)