css格式比较及选择器类型总结
在前端入门的前三天把网页制作过程中常用的一些标签和属性都认识和练习了一遍，能够做出简单模块的框架。就像老师说的网页制作就像建一栋大楼，html是砖和水泥，css是精装，js是完善各个功能。现在就开始进入装修步骤。
一：css的书写形式
1.行内样式
<p id="p1" style="color: red">他真的很喜欢你，像风吹了八千里</p>
优点：1.写法简单，2.优先级高
缺点：1.内容和样式没有分离，2.样式没有复用性，仅作用于当前元素，3.当属性太多时布局不好看
2.内部样式
</head>
<title>css入门</title>
<style>
p{
color: plum;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<p>他真的很喜欢你，像风吹了八千里</p> </body>
</html> 3.外部样式
在工程中新建css文件，用
<link rel="stylesheet" href="../../css/first.css">
引入所写的样式
优点：1.css,html完全分离，2.css得到充分复用
缺点：要说缺点应该就是打开另外一个文件写起来需要来回切换吧
二：语法：
选择器{
属性设置
}
常用选择器类型：
元素选择器：直接写元素名称，选中的是当前页面所有同名元素，不能单独设置
类选择器：在标签中写class=””,在style中用.class名，类选择器的优先级比元素优先级高，同一个class名可以在不同标签中使用
Id选择器：在标签中写id=””,在style中写#id名，每一个id只能用一个
并集选择器：中间用逗号隔开，适用于要对多个标签进行相同的属性设置
后代/子代选择器：后代选择器： 空格 范围大；子代选择器：> 范围小某些样式会被子代后代继承如color,有些则不会,如height
伪类选择器：用冒号来使用伪类选择器
first-child：第一个元素
first-child：最后一个元素
nth-child(n)：第n个元素
<style>
li:nth-child(2n){
color: red;
}
li:nth-child(2n-1){
color: yellow;
}
</style>
此时li中偶数位置字体颜色变为红色，奇数位置字体为黄色
hover：鼠标移上
通用选择器：*：通配符选择器匹配当前界面所有元素，一般只用在margin: padding中
<style>
*{
margin: 0;
padding: 0;
}
<style\>
优先级：
在正常的引入顺序下(先引入外部,再引入内部)优先级(就近原则)的顺序为:行样式>内部样式>外部样式
特殊情况：
引入在内部之后则由于就近原则执行外部属性权值：内联样式+1000分(style),id选择器100,class选择器10,元素选择器
分数越高则优先权越高
!important 优先级高于行样式
css格式比较及选择器类型总结的更多相关文章
- CSS选择器类型总结
CSS选择器类型总结 1.通用选择器 一般用于给所有元素做一些通用性的样式设置,比如清除内边距.外边距等.但是效率比较低,尽量不要使用. * { margin: 0; padding: 0; } 2. ...
- CSS样式----图文详解：css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
- CSS魔法堂：选择器及其优先级
一.前言 首先看看一道阿里这期网申的题目吧! 1.找出下面优先级相同的选择器 A. img.thumb:after B.[data-job="frontend"]::firs ...
- CSS样式----css样式表和选择器（图文详解）
本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样 ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- 认识CSS中css引入方式、选择器、文本样式设置以及显示模式
前端之HTML.CSS(三) CSS CSS-Cascading Styles Sheets,层叠样式表.用于网页的表现,主要用于布局和修饰网页. CSS引入方式 CSS的三种引入方式:行内样式,内部 ...
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- css语法规范、选择器、字体、文本
css语法规范 使用 HTML 时需要遵从一定的规范,CSS 也是如此.要想熟练地使用 CSS 对网页进行修饰,首先需要了解CSS 样式规则. CSS 规则由两个主要的部分构成:选择器以及一条或多条声 ...
- CSS简介，基础选择器，字体属性，文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
随机推荐
- 2018-2019-20175302实验二《Java面向对象程序设计》实验报告
2018-2019-2 学号实验二<Java面向对象程序设计>实验报告 一.实验步骤及内容 1. 面向对象程序设计 参考 http://www.cnblogs.com/rocedu/p/6 ...
- 去除web项目中的css、js缓存
<link rel="stylesheet" type="text/css" href="~/Content/Home.css?param=Ma ...
- python note 15 正则表达式
# 正则表达式 只和字符串打交道 # 正则表达式的规则# 规则 字符串 从字符串中找到符合规则的内容 # 字符组 : [] 写在中括号中的内容,都出现在下面的某一个字符的位置上都是符合规则的 # [0 ...
- springmvc的面试知识点总结
新的一年,开启新的篇章,欧气满满,迎接未来. 前几天回顾了spring相关的知识点,现在再来回顾下springmvc相关的知识点做一下总结. 问题总结 之前面试问题总结的那篇文章中,与springmv ...
- 设计模式之装饰者模式-java实例
设计模式之装饰者模式 需求场景 我们有了别人提供的产品,但是别人提供的产品对我们来说还不够完善,我们需要对这个产品的功能进行补强,此时可以考虑使用装饰者模式. 我们已经有了产品,而且这个产品的功能非常 ...
- Web自动化附件上传
在进行web界面自动化编写时,可以根据定位元素的方式进行编写,但是如果某一个功能涉及到有附件上传功能,那么该如何解决呢? 继续往下看>>>>> 场景:登录系统后,进行新增 ...
- Eclipse Maven: Cannot change version of project facet Dynamic web to 3.0 的解决方法
在 Eclipse 中创建 Maven web 项目的时候使用 maven-artchetype-webapp 骨架,但是这个 catalog 比较老,用的 servlet 还是 2.3 在 Proj ...
- 知识阅读的好处你都了解吗？芒果xo来告诉你答案
阅读www.mangoxo.com让人才思敏捷,杜甫曾说:读书破万卷,下笔如有神:阅读让人心情愉悦,蒙台居曾说过:再没有比读书更廉价的娱乐,更持久的满足了:阅读让人思维灵活,狄德罗曾说过:不读书的人, ...
- python3 第二十六章 - 内置函数之Number相关
数学函数 函数 返回值 ( 描述 ) 实例 abs(x) 返回数字的绝对值,如abs(-10) 返回 10 print(abs(-10)) =======输出:====== 10 ceil(x) 返回 ...
- 七、PyQT5控件——QSlider，QSpinBox
一.Qslider QSlider是一个滑动条,可以设置成水平或垂直放置.最常用的方法允许用户在某一范围内互动该滑块,并将滑块的位置转换成一个整数值(int类型),这种方式可以在某一个范围内平顺的变动 ...