一.引入css的三种方式

1.行间式

<div style="width: 100px; height: 100px; background-color: red"></div>

2.内联式

<head> <style> div { width: 100px; height: 100px; background-color: red; } </style> </head>

3.外联式

file: zero.css

div { width: 100px; height: 100px; background-color: red; }

file: zero.html

<head>

<link rel="stylesheet" type="text/css" href="css/zero.css" />

</head>

二 样式

# 样式与长度颜色

#### 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

三 常用样式

#### 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选择器

# 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;
}
```

- 一次性控制一个选择器(逻辑最后的那个选择器)，前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系

#### 4、交集选择器

```css
<div class="d" id="dd"></div>
div.d#dd {
color: red;
}

<div class="d1 d2 d3"></div>
.d1.d2.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：掌握所有选择器，并熟知选择器优先级

第五十五天 css基础入门的更多相关文章

  1. 孤荷凌寒自学python第五十五天初识MongoDb数据库

    孤荷凌寒自学python第五十五天第一天初识MongoDb数据库 (完整学习过程屏幕记录视频地址在文末) 大家好,2019年新年快乐! 本来我想的是借新年第一天开始,正式尝试学习爬虫,结果今天偶然发现 ...

  2. 第三百五十五节，Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy信号详解

    第三百五十五节,Python分布式爬虫打造搜索引擎Scrapy精讲—scrapy信号详解 信号一般使用信号分发器dispatcher.connect(),来设置信号,和信号触发函数,当捕获到信号时执行 ...

  3. “全栈2019”Java第五十五章：方法的静态绑定与动态绑定

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  4. 第三百五十五天 how can I 坚持

    快一年了,三百五十五天了,等写个程序算算时间,看看日期和天数能不能对的上,哈哈. 计划还是未制定,天气预报还是没有写完,立马行动,发完这个博客,立马行动. 计划:设计模式1个月,三大框架3个月,计算机 ...

  5. CSS基础入门

    css基础语法 一.CSS格式 选择器{ 属性名:属性值; 属性名:属性值; } 选择器负责圈定范围,要修改的元素集合,花括号内的声明由属性名和属性值组成(key:value)的形式,用于设定具体样式 ...

  6. OpenCV开发笔记（五十五）：红胖子8分钟带你深入了解Haar、LBP特征以及级联分类器识别过程（图文并茂+浅显易懂+程序源码）

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  7. abp(net core)+easyui+efcore实现仓储管理系统——出库管理之六(五十五)

    abp(net core)+easyui+efcore实现仓储管理系统目录 abp(net core)+easyui+efcore实现仓储管理系统--ABP总体介绍(一) abp(net core)+ ...

  8. 五十五.ansible概述、ansible基础 、ad-hoc、批量配置管理

    1.环境准备 (自动化工具,批量操作) 6台 2cpu,1.5G以上内存,20G硬盘,1网卡 1.1 基础环境准备 1)启动6台虚拟机,ansible.sh   2)真机配置yum仓库 ]# tar ...

  9. salesforce 零基础学习（五十五）java通过SOAP方式定时访问某个文件然后插入到sObject中

    项目源码:https://github.com/zhangyueqidlmu/SOAP-Access-SFDC.git 项目背景:salesforce端相关数据需要其他系统提供,其他系统可以提供相关数 ...

随机推荐

  1. [故障公告]阿里云“华东1地域部分负载均衡https访问异常“引起部分站点无法访问

    今天上午 9:40 - 11:06 左右,由于阿里云“华东1地域部分负载均衡https访问异常”,造成我们的部分站点(尤其是博客后台)无法正常访问,给您带来了很大的麻烦,请您谅解. 现已恢复正常,如果 ...

  2. 简单使用redis实现sso单点登录

    前面几篇分享了nosql只mongodb,今天简单分享另一个nosql神兵redis. 主要模仿sso单点登录,将登录人信息写入redis.话不多说,直接上马,驾. /// <summary&g ...

  3. centos6.5 squid安装

    squid作用 1正向代理 标准的代理缓冲服务器,须在每一个内部主机的浏览器上明确指明代理服务器的IP地址和端口号. 透明代理缓冲服务器,代理操作对客户端的浏览器是透明的(即不需指明代理服务器的IP和 ...

  4. Can’t connect to local MySQL server through socket 原因解析

    在连接mysql的时,经常会出现以下错误提示: ERROR (HY000): Can't connect to local MySQL server through socket '/var/lib/ ...

  5. Python Revisited Day 04 （控制结构与函数）

    目录 4.1 控制结构 4.1.1 条件分支 4.1.2 循环 4.2 异常处理 4.2.1 捕获与产生异常 4.2.2 自定义异常 4.3 自定义函数 Tips 参数默认值为可变时 危险 4.3.1 ...

  6. Effective java ---遵守普遍接受的命名规则

    alibaba的java命名规范如下: . [强制]代码中的命名均不能以下划线或美元符号开始,也不能以下划线或美元符号结束. 反例: _name / __name / $Object / name_ ...

  7. Lombok 安装、入门以及使用

    lombok 的官方网址:http://projectlombok.org/ lombok 安装    使用 lombok 是需要安装的,如果不安装,IDE 则无法解析 lombok 注解.先在官网下 ...

  8. python_format格式化输出、while else、逻辑运算符、编码初识

    1.格式化输出 .%d  %s  格式化输出:% 占位符,d 表示替换整型数,s表示要替换字符串. name = input('请输入名字:') age = input('请输入年龄:') sex = ...

  9. rest-framework序列化

    快速实例 Quickstart 序列化 开篇介绍: ---- 一切皆是资源,操作只是请求方式 ----book表增删改查 /books/ books /books/add/ addbook /book ...

  10. docker技术之基本命令

    我们使用基本命令之前,先来普及一下操作中使用的基本概念 镜像   image 容器   container 仓库   repository 镜像 Docker 镜像是一个特殊的文件系统,除了提供容器运 ...