前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式、长度与颜色单位、常用样式、选择器
一、CSS的三种引入方式
1、行间式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>行间式</title>
</head>
<body>
<!-- 1.在标签头部的style标签内 -->
<!-- 2.属性值满足CSS语法 -->
<!-- 3.属性值用key：value形式赋值，value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<div style="width:100px;height:100px;background-color:red"></div>
</body> </html>
2、内联式
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>内联式</title>
<style>
div{
width:100px;
height:100px;
background:yellow;
}
</style>
</head>
<body>
<!-- 1.在style标签内(style标签一般为head的子标签) -->
<!-- 2.属性值满足CSS语法 -->
<!-- 3.属性值用key：value形式赋值，value具有单位 -->
<!-- 4.属性值之间用;隔开 -->
<!-- 5.格式：选择器 {样式快}-->
<div></div>
</body> </html>
3、外联式
div{
width: 200px;
height: 200px;
background-color: green;
}
2.1Css.css
<!DOCTYPE html>
<html lang="en">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外联式</title>
<link rel="stylesheet" type="text/css" href="2.1Css.css">
</head>
<body>
<!-- 1.在外部css文件中 -->
<!-- 2.属性值满足的是css语法 -->
<!-- 3.属性值用key: value形式赋值,value具有单位 -->
<!-- 4.属性值之间用;隔开(一般独行分开赋值) -->
<!-- 5.格式: 选择器{样式块} -->
<!-- 6.将html与css文件建立联系:html通过link标签链接外部css(一般head中链接) -->
<div></div>
</body>
4、三种引入方式的优先级
1.三种方式协同布局:
2.不重复的属性为属性第一次出现时的值
3.重复的属性采用覆盖赋值,保留最后位置的属性值
4.行间式一定是逻辑上最后被解析的位置(js正常操作的就是行间式)
5.!important会影响优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三种引入优先级</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: yellow!important;
}
</style>
<link rel="stylesheet" type="text/css" href="02.css">
</head>
<body>
<div style="background-color: yellowgreen"></div>
<!-- <div></div> -->
</body>
</html> <!-- 最后显示的是黄色，因为黄色加了!important -->
<!-- 如果去掉!important，显示的颜色是黄绿色 -->
二、长度及颜色单位
1、长度单位
1. px：像素(pixel)，屏幕上显示的最小单位，用于网页设计，直观方便
2. mm：毫米
3. cm：厘米
4. in：英寸
5. pt：点(point)，一个标准的长度单位，1pt＝1/72in，用于印刷业，非常简单易用；
6. em：相当长度，通常1em=16px，应用于流式布局
7.vw、vh:view width,view height 百分比
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>长度单位</title>
<style type="text/css">
body {
background-color: yellowgreen;
}
div {
width: 100px;
/*width: 720pt; 10in*/
/*width: 100mm; 10cm*/
/*width: 10em; 通常160px 10rem*/
/*width: 50vw; 50% view width*/
height: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
2、颜色单位
1. rgb()：三个值可为[0-255]数值或百分比，以,相隔（r:Red g:Green b:Blue）
2. rgba()：前三个值可为像素或是百分比，最后一个为[0, 1]数值，以,相隔（r:Red g:Green b:Blue a:Alpha）
3. hsl()：第一个值为[0,360]数值，后二个值可为百分比，以,相隔（h:Hue s:Saturation l:Lightness）
4. hsla()：第一个值为[0,360]数值，中间二个值可为百分比，最后一个为[0, 1]数值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha）
5. #AABBCC：六个十六进制位，每两位一整体，分别代表Red、Green、Blue，可以简写#abc
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>长度及颜色单位</title>
<style type="text/css">
body {
background-color: yellowgreen;
}
div {
/*颜色单位*/
/*单词 rgb() rgba() #六个十六进制位 hsl()*/
/*background-color: cyan;*/
/*background-color: rgb(255, 0, 0);*/
/*background-color: rgba(255, 0, 0, 0);*/
/*满足AABBCC形式可以简写为abc*/
background-color: #a0c
}
</style>
</head>
<body>
<div></div>
</body>
</html>
三、常用样式
1、字体样式
1. font-size：字体大小
2. font-style： 字体风格 normal \| italic \| oblique
3. font-weight：字体重量 normal \| bold \| lighter \| 100~900
4. line-height：行高
5. font-family：字体族科，多值用于备用，以,隔开,第一个字体不存在，使用第二个字体
eg：font-family:"STsong","STheiti";
6. font：字重 风格 大小/行高 字族
eg：font:lighter 50px/100px "STsong","STheiti";
2、文本样式
1. color：颜色
2. text-align：水平排列
left 居左
center 居中
right 居右 3. text-decoration：字划线
underline 下划线
line-through 中划线
overline 下划线
none 没有划线，主要应用于超链接的去除下划线 4. text-indent：缩进 5. letter-spacing：字间距 6. word-spacing：词间距 7. vertical-align：垂直排列
baseline：将支持valign特性的对象的内容与基线对齐
sub：垂直对齐文本的下标
super：垂直对齐文本的上标
top：将支持valign特性的对象的内容与对象顶端对齐
text-top：将支持valign特性的对象的文本与对象顶端对齐
middle：将支持valign特性的对象的内容与对象中部对齐
bottom：将支持valign特性的对象的文本与对象底端对齐
text-bottom：将支持valign特性的对象的文本与对象底端对齐 8.word-break：自动换行
normal：默认换行规则
break-all：允许在单词内换行
3、背景样式
1. background-color：颜色 2. background-image：图片，在url中说明图片的路径
eg：background-image: url(bg.png); 3. background-repeat：重复
no-repeat：不重复
repeat-x：在X轴上重复
repeat-y：在y轴上重复
repeat：重复 4. background-position：定位，第一个值表示水平方向，第二个值表示垂直方向。定位值可为方位词、百分比及固定值，值个数默认为两位(水平/垂直)，一个值时垂直默认center
top | bottom | left | right | center
eg：background-position：right，center 5. background-attachment：滚动模式 6. background：整体设置
background: 背景图片 图片水平位置 图片垂直位置 图片重复 背景颜色
eg：background: url("data/bg_repeat.gif") 10px 10px no-repeat red
四、基础选择器
1、通配选择器
* {
border: solid;
}
/*匹配文档中所有标签：通常指html、body及body中所有显示类的标签*/
2、标签选择器
div {
background-color: yellow;
}
/*匹配文档中所有与标签名匹配的标签：如div{}会匹配文档中全部div，span{}会匹配文档中所有span*/
3、类选择器
.red {
color: red;
}
/*匹配文档中所有拥有class属性且属性值为red的标签：如<sup class="red"></sup> <sub class="red"></sub>均会被匹配*/
4、id选择器
#div {
text-align: center;
}
/*匹配文档中所有拥有id属性且属性值为div的标签：如<div id="div"></div> <section id="div"></section>均会被匹配*/
5、选择器的优先级
id > class > 标签 > 通配
6、基础选择器总结
1.通配选择器一般用于整体reset操作(reset操作:清除系统自定义样式)
* {
margin:;
}
2.标签与id选择器运用场景并不多,一般不提倡采用id选择器进行布局
3.类选择器为布局首选(建议基本全用class选择器进行布局)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css选择器</title>
<style type="text/css">
/*1.通配选择器(*): 匹配所有(html,body,body中的所有子标签)(具有显示效果的所有标签)*/
/** {
border: solid;
}*/ /*2.标签选择器(标签名):匹配指定标签名的对应所有标签*/
div {
width: 100px;
height: 100px;
background-color: red;
}
section {
width: 200px;
height: 200px;
background-color: yellow;
} /*3.类选择器(.):匹配指定类名对应的所有标签*/
.dd {
font-size: 50px;
} /*4.id选择器(#):匹配指定id名对应的唯一标签*/
#ele {
color: blue;
} * {
text-align: left;
}
div {
text-align: right;
}
.d {
text-align: center;
}
#ele {
text-align: left;
} </style>
</head>
<body>
<div class="dd">d_1</div>
<section>s_1</section>
<div class="d" id="ele">d_2</div>
<section class="dd">s_2</section>
<span></span>
</body>
</html>
前端（二）—— CSS的引入方式、长度与颜色单位、常用样式、选择器的更多相关文章
- 前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
- 前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器
前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 叠样式表(英文全称:Cascading Style Sheets)是一种用来表现 ...
- python 全栈开发，Day46(列表标签,表格标签,表单标签,css的引入方式,css选择器)
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- Day46（列表标签，表格标签，表单标签，css的引入方式，css选择器）
一.列表标签 列表标签分为三种. 1.无序列表<ul>,无序列表中的每一项是<li> 英文单词解释如下: ul:unordered list,“无序列表”的意思. li:lis ...
- CSS的引入方式和样式
CSS的引入方式和样式 一.样式 行内样式 内接样式 外接样式(1.链接式 2.导入式) <!--行内样式--> <div> <p style="color: ...
- CSS的引入方式和复合选择器
CSS的引入方式 样式表 优点 缺点 范围 行内样式表 书写方便 结构样式混写 控制一个标签 内部样式表 部分结构和样式相分离 没有彻底 控制一个页面 外部样式表 完全实现结构和样式分离 需要引入 控 ...
- CSS的引入方式
再用HTML编写的文本中,有是没能达到我们想要的效果,此时此刻我们可以用过引用CSS来控制!这不仅使得效果好而且代码层次清晰.CSS的引入方式可以分为四类: 1.链入外部样式表,就是把样式表保存为一个 ...
- Python 45 长度及颜色单位 、字体样式 、文本样式 、背景样式 、css基础选择器
一:长度及颜色单位 长度单位 px(像素) in(英寸) pt(点),一个标准的长度单位,1pt = 1/72in mm(毫米) cm ...
- CSS 从入门到放弃系列：CSS的引入方式
css的四种引入方式 内联方式(行间样式) <div style="width:100px;height: 100px; background-color: red"> ...
随机推荐
- 【C++第一个Demo】---控制台RPG游戏1【游戏简介】
经过1个月的制作和多次修改,终于有了基本雏形(此篇仅用于纪念历时3个多月C/C++学习所付出努力,也给和我一样苦恼于不能快速理解面向对象的同学们一点灵感) 在制作这个Demo过程中也受到了很多大 ...
- LeetCode N皇后 & N皇后 II
题目链接:https://leetcode-cn.com/problems/n-queens/ 题目链接:https://leetcode-cn.com/problems/n-queens-ii/ 题 ...
- Rust <1>：数据类型、变量、可变性、常量、隐藏
rust 是强类型语言,所有变量.常量都必须有明确的数据类型:很多情况下,省略类型声明,编译器可自动推导,但不是所有情况下都会成功. rust 有整型.浮点型.布尔型.字符型.数组.元组.枚举.结构体 ...
- CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...
- [USACO14MAR]浇地Watering the Fields
题目描述 Due to a lack of rain, Farmer John wants to build an irrigation system tosend water between his ...
- 判断url
//判断url地址 isUrl(str){ let reg = /[0-9a-zA-z]+.(html|htm|shtml|jsp|asp|php|com|cn|net|com.cn|org)$/; ...
- Joda-Time 入门
Joda-Time 令时间和日期值变得易于管理.操作和理解.事实上,易于使用是 Joda 的主要设计目标.其他目标包括可扩展性.完整的特性集以及对多种日历系统的支持.并且 Joda 与 JDK 是百分 ...
- less&sass
定义: less是一种动态样式语言,对css赋予了动态语言的特性,比如变量.继承.运算.函数,既可以运行在客户端,也可以运行在服务器端,依赖JavaScript sass是一种动态语言,属于缩排语 ...
- Spring Boot中普通类获取Spring容器中的Bean
我们知道如果我们要在一个类使用spring提供的bean对象,我们需要把这个类注入到spring容器中,交给spring容器进行管理,但是在实际当中,我们往往会碰到在一个普通的Java类中,自己动手n ...
- Codeforces - 1139D - Steps to One (概率DP+莫比乌斯反演)
蒟蒻数学渣呀,根本不会做. 解法是参考 https://blog.csdn.net/xs18952904/article/details/88785210 这位大佬的. 状态的设计和转移如上面博客一样 ...