css3种引入方式,样式与长度颜色,常用样式,css选择器
# CSS三种引入方式
## 一、三种方式的书写规范
#### 1、行间式
```html
<div style="width: 100px; height: 100px; background-color: red"></div>
```
#### 2、内联式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 3、外联式
```css
file: zero.css
div {
width: 100px;
height: 100px;
background-color: red;
}
```
```css
file: zero.html
<head>
<link rel="stylesheet" type="text/css" href="css/zero.css" />
</head>
```
## 二、三种方式间的"优先级"
* 与样式表的解析顺序有关
###### v_test:掌握三种CSS引入方式方式
# 样式与长度颜色
#### 1、基本样式
```html
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
```
#### 2、长度
* px:像素(pixel),屏幕上显示的最小单位,用于网页设计,直观方便
* mm:毫米
* cm:厘米
* in:英寸
* pt:点(point),一个标准的长度单位,1pt=1/72in,用于印刷业,非常简单易用;
* em:相当长度,通常1em=16px,应用于流式布局
#### 3、颜色
* rgb():三个值可为[0-255]数值或百分比,以,相隔(r:Red g:Green b:Blue)
* rgba():前三个值可为像素或是百分比,最后一个为[0, 1]数值,以,相隔(r:Red g:Green b:Blue a:Alpha)
* hsl():第一个值为[0,360]数值,后二个值可为百分比,以,相隔(h:Hue s:Saturation l:Lightness)
* hsla():第一个值为[0,360]数值,中间二个值可为百分比,最后一个为[0, 1]数值,以,相隔(h:Hue s:Saturation l:Lightness a:Alpha)
* #AABBCC:六个十六进制位,每两位一整体,分别代表Red、Green、Blue,可以简写#abc
###### v_test:熟悉所有的长度单位与颜色表示方式
# 常用样式
#### 1、字体样式
* font-family:字体族科,多值用于备用,以,隔开
```css
font-family: "STSong", "Arial";
```
* font-size:字体大小
* font-style: 字体风格 normal \| italic \| oblique
* font-weight:字体重量 normal \| bold \| lighter \| 100~900
* line-height:行高
* font:字重 风格 大小/行高 字族
#### 2、文本样式
* color:文本颜色
* text-align:横向排列
```css
left 居左 | center 居中 | right 居右
```
* vertical-align:纵向排列
```css
baseline:将支持valign特性的对象的内容与基线对齐
sub:垂直对齐文本的下标
super:垂直对齐文本的上标
top:将支持valign特性的对象的内容与对象顶端对齐
text-top:将支持valign特性的对象的文本与对象顶端对齐
middle:将支持valign特性的对象的内容与对象中部对齐
bottom:将支持valign特性的对象的文本与对象底端对齐
text-bottom:将支持valign特性的对象的文本与对象底端对齐
```
* text-indent:字体缩减
* text-decoration:字划线
* letter-spacing:字间距
* word-spacing:词间距
* word-break:自动换行
```css
normal:默认换行规则
break-all:允许在单词内换行
```
#### 3、背景样式
* background-color:颜色
* background-image:图片
```css
background-image: url(bg.png);
```
* background-repeat:重复
```css
repeat | no-repeat | repeat-x | repeat-y
```
* background-position:定位
```css
top | bottom | left | right | center
```
###### v_hint:定位值可为方位词、百分比及固定值,值个数默认为两位(水平/垂直),一个值时垂直默认center
* background-attachment:滚动模式
```css
scroll | fixed
```
###### v_eg:父级设置属性,子集内容超出父级范围
###### v_hint:掌握基本属性
# CSS选择器
## 一、基础选择器
#### 1、通配选择器
```css
* {
border: solid;
}
匹配文档中所有标签:通常指html、body及body中所有显示类的标签
```
#### 2、标签选择器
```css
div {
background-color: yellow;
}
匹配文档中所有与标签名匹配的标签:如div{}会匹配文档中全部div,span{}会匹配文档中所有span
```
#### 3、类选择器
```css
.red {
color: red;
}
匹配文档中所有拥有class属性且属性值为red的标签:如<sup class="red"></sup> <sub class="red"></sub>均会被匹配
```
#### 4、id选择器
```css
#div {
text-align: center;
}
匹配文档中所有拥有id属性且属性值为div的标签:如<div id="div"></div> <section id="div"></section>均会被匹配
```
## 二、基础选择器优先级
- 基础选择器优先级大致与选择器匹配范围成反比,匹配范围越小,优先级越高
- 基础选择器优先级大致与选择器匹配精度成正比,匹配精度越高,优先级越高
- 基础选择器优先级:id选择器 > 类选择器 > 标签选择器 > 通配选择器
###### v_hint:id选择器必须保证单文档的唯一性
## 三、组合选择器
#### 1、群组选择器
```css
div, span, .red, #div {
color: red;
}
```
- 一次性控制多个选择器
- 选择器之间以,隔开,每一个选择器位均可以为任意合法选择器或选择器组合
#### 2、子代(后代)选择器
```css
子代选择器用>连接
body > div {
color: red;
}
后代选择器用空格连接
.sup .sub {
color: red;
}
```
- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 子代选择器必须为一级父子嵌套关系,后代选择器可以为一级及多级父子嵌套关系
#### 3、相邻(兄弟)选择器
```css
相邻选择器用+连接
.d1 + .d2 {
color: red;
}
兄弟选择器用~连接
.d1 ~ .d3 {
color: red;
}
```
- 一次性控制一个选择器(逻辑最后的那个选择器),前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系,兄弟选择器可以为直接相邻或间接相邻关系
## 四、组合选择器优先级
- 组合选择器优先级与权值相关,权值为权重和
- 权重对应关系
| 选择器 | 权重 |
| :--------: | :---: |
| 通配 | 1 |
| 标签 | 10 |
| 类、属性 | 100 |
| id | 1000 |
| !important | 10000 |
- 选择器权值比较,只关心权重和,不更新选择器位置
- 不同级别的选择器间不具备可比性:1个类选择器优先级高于n个标签选择器的任意组合
## 五、属性选择器
- [attr]:匹配拥有attr属性的标签
- [attr=val]:匹配拥有attr属性,属性值为val的标签
- [attr^=val]:匹配拥有attr属性,属性值以val开头的标签
- [attr$=val]:匹配拥有attr属性,属性值以val结尾的标签
- [attr*=val]:匹配拥有attr属性,属性值包含val的标签
###### v_hint:属性选择器权重等价于类
###### v_test:掌握所有选择器,并熟知选择器优先级
css3种引入方式,样式与长度颜色,常用样式,css选择器的更多相关文章
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- 11 CSS的三种引入方式和基本选择器
<!-- 整体说明: 1.CSS的三种引入方式 (1)行内样式 (2)内接样式 (3)外接样式 2.CSS的基本选择器 (1)id选择器 (引用方式:#id) (2)标签选择器(引用方式:标签名 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- 前端基础----CSS语法、CSS四种引入方式、CSS选择器、CSS属性操作
一.CSS语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如: h1 {color:red; font-size:14px;} 二.CSS四种引入方式 1,行内式 行内式是在标 ...
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- python全栈开发day38-css三种引入方式、基础选择器、高级选择器、补充选择器
一.昨日内容回顾 div:分割整个网站,很多块 (1)排版标签 (2)块级标签 独占一行 可以设置高和宽,如果不设置宽高,默认是父盒子的宽 span: (1) 小区域 (2)文本标签 (3)在一行内显 ...
- css-1,css的三种引入方式 基本选择器
<!-- (1)CSS 层叠样式表 作用:修饰网页结构 (2)css的三种引入方式 权重: 优先级高 权重大 谁在页面谁的权重大 - 行内样式 注意:行内样式的优先级是最高的 - 内接样式 - ...
- CSS简单的四种引入方式
CSS一共有四种引入方式 (1)最简单的两种方式是直接在html标签里面引入,或者在html文件前面声明,以下是简单的代码示例 <!DOCTYPE html> <html lang= ...
- CSS的4种引入方式及优先级
第一:css的四种引入方式 1.行内样式 最直接最简单的一种,直接对HTML标签使用style="",例如: <p style="color:#F00; " ...
随机推荐
- errror:[test_rig3.launch] is neither a launch file in package [svo_ros] nor is [svo_ros] a launch file name The traceback for the exception was written to the log file
1. 打开一个终端,运行roscore 2. 打开另一个终端,运行 roslaunch svo_ros test_rig3.launch 出现errror: 忘记关键步骤了 $ cd <path ...
- YII2中ActiveDataProvider与GridView的配合使用
YII2中ActiveDataProvider可以使用yii\db\Query或yii\db\ActiveQuery的对象,方便我们构造复杂的查询筛选语句. 配合强大的GridView,快速的显示我们 ...
- java命令行调用本地文件协议hikvideoclient://
最近在做一个视频项目,项目中需要通过调用海康本地协议打开视频播放器,起初尝试通过Process/ProcessBuilder无解,因为这个是调用本地应用程序的. 我要调用的是本地伪协议,最终通过一些研 ...
- u-boot之make <board_name>_config执行过程分析
从网上下载uboot源码之后需要对源码作相应修改来支持自己的开发板,更改完源码之后需要配置.uboot(make<board_name>_config).这里以百问网的开发板jz2440为 ...
- spring + ibatis 多数据源事务(分布式事务)管理配置方法(转)
spring + ibatis 多数据源事务(分布式事务)管理配置方法(转) .我先要给大家讲一个概念:spring 的多数据源事务,这是民间的说法.官方的说法是:spring 的分布式事务.明白了这 ...
- 域名ping不通,ip地址ping得通
原因:dns服务器过期,需要更换dns服务器地址
- Spring ApplicationContext(八)事件监听机制
Spring ApplicationContext(八)事件监听机制 本节则重点关注的是 Spring 的事件监听机制,主要是第 8 步:多播器注册:第 10 步:事件注册. public void ...
- String... to 可变参数的使用
public class testMail { public static void fun(int... x) { for(int i = 0;i < x.length;i++) { Syst ...
- boost的accumulator rolling_mean的使用
Boost.Accumulators is both a library for incremental statistical computation as well as an extensibl ...
- 销售vs技术岗,做技术的方法思考
销售甚至比技术岗位挣得还多,当然,做技术的比较好的拿到的自然也多. 我在想个问题,技术的天然优势是可以不断地积累,包括写code,写博客,做流程,完善流程,自动化流程,或者把某些工作流程化,自动化,托 ...