html-0
选择器
（一）:first-child和：first-of-type
:first-child第一个元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器</title>
<style type="text/css">
p:first-child{
color: red;
}
</style>
</head>
<body>
<p>sssssssss</p>
<p>ddddddddd</p>
</body>
</html>
:first-of-type第一个某种类型元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器</title>
<style type="text/css">
/*.div1 :first-child{
color: red;
}*/
.div1 :first-of-type{
color: red;
}
</style>
</head>
<body>
<div class="div1">
<h2>我是班长</h2><!-- 在第一个div中h2中是第一次出现的类型 -->
<h1>我是班长的朋友</h1><!-- 在第一个div中h1中是第一次出现的类型 -->
<div class="div1">
<h1>我是学位</h1><!-- 在第二个div中h1中是第一次出现的类型 -->
<h2>woshiss</h2><!-- 在第二个div中h2中是第一次出现的类型 -->
</div>
<h2>s;a;dlkl;</h2><!-- 在第一个div中h2中是第二次出现的类型 -->
<h1>dsdpppp</h1><!-- 在第一个div中h1中是第二次出现的类型 -->
</div>
</body>
</html>
（二）：only-child和:only-of-type
:only-child只有一个孩子才会变
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器</title>
<style type="text/css">
.div1 :only-child{
color: red;
}
/*.div1 :first-of-type{
color: red;
}*/
</style>
</head>
<body>
<!-- div不是有一个孩子，不会变红 -->
<div class="div1">
<h2>我是班长</h2>
<h1>我是班长的朋友</h1>
<div class="div1">
<h1>我是学位</h1>
<h2>woshiss</h2>
</div>
<h2>s;a;dlkl;</h2>
<h1>dsdpppp</h1>
</div>
</body>
</html>
:only-of-type一种类型只有一个的时候才会变
在第一个div中h2有三个h1有一个所以h1会变
在第二个div中h1/h2都是一个
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器</title>
<style type="text/css">
/*.div1 :only-child{
color: red;
}*/
.div1 :only-of-type{
color: red;
}
</style>
</head>
<body>
<div class="div1">
<h2>我是班长</h2>
<h1>我是班长的朋友</h1>
<div class="div1">
<h1>我是学位</h1>
<h2>woshiss</h2>
</div>
<h2>s;a;dlkl;</h2>
<h2>dsdpppp</h2>
</div>
</body>
</html>
表单的伪类
(一）input:required
input:require{
border:solid 1px red
}
(二）input:optiona l###
input:optional{
border:solid 1px red
}
(三）input:valid
input:valid{
background-color：white;
border:solid 1px red;
outline:none;
}
(四）input:invalid
input:valid{
background-color：white;
border:solid 1px green;
outline:none;
}
类元素
（一）:before和:after
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器</title>
<style type="text/css">
p{
font-size: 2em;
}
p:before{
content: "";
display: inline-block;
width: 1.5em;
height: 1.5em;
border-radius:50%;
position: relative;
top: 45px;
left: 15px;
background-color: #C39;
}
p:after{
content: "";
display: inline-block;
width: 1.5em;
height: 1.5em;
border-radius:50%;
position: relative;
top: 45px;
left: 15px;
background-color: #C39;
}
</style>
</head>
<body>
<p>>-<</p>
</body>
</html>
权重
！important 权重：无穷
内联样式（style属性) 权重：1000
id 100
class/属性选择器/伪类 10
标签选择器/伪元素 1
通配符 0
文本-初步-字体
（一）设置字体名称
font-family属性，定义文本的字体
body{font-family:sans-serif;}
h1{font-family:Georgis,serif}
（二）设置字体倾斜
font-style属性，最常用于倾斜文本
三个属性值
- normal：文本正常显示
- italic：文本倾斜显示
- oblique：文本倾斜显示
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器</title>
<style type="text/css">
p.normal{
font-style: normal;
}
p.italic{
font-style: italic;
}
p.oblique{
font-style: oblique;
}
</style>
</head>
<body>
<p class="normal">wewewew</p>
<p class="italic">wewewew</p>
<p class="oblique">wewewew</p>
</body>
</html>
（三）设置字体加粗
font-weight属性，设置粗细
- 使用bold关键字可以设置粗体
- 关键字100-900为字体指定9级加粗，100最细，900最粗，400相当于normal，700相当于bold
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器</title>
<style type="text/css">
p.normal{
font-weight: bold;
}
p.italic{
font-weight: normal;
}
p.oblique{
font-style: 900;
}
</style>
</head>
<body>
<p class="normal">wewewew</p>
<p class="italic">wewewew</p>
<p class="oblique">wewewew</p>
</body>
</html>
（四）设置字体大小
font-size，所有css单位都可以作为值
（五）组合定义###
font属性，设置组合字体样式，必须设置字体与大小
字体必须放在最后，因为字体是可以设置多个的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>选择器</title>
<style type="text/css">
p{
font:bold italic 40px Georgia;
}
</style>
</head>
<body>
<p class="normal">wewewew</p>
<p class="italic">wewewew</p>
<p class="oblique">wewewew</p>
</body>
</html>
html颜色
p{color:red}
p{color:#ffff}
p{color:rgb(0,0,255)}//红绿蓝
p{color:rgba(0,0,255,0.5)}//红绿蓝，透明度
p{color:transparent;}//完全透明
html单位
%：百分比
in：英寸
cm:厘米
mm：毫米
em：1em等于当前字体尺寸，2em等于当前字体的两倍
ex：一个ex是一个字体的x-height。（x-height通常是字体尺寸的一半)
pt:磅（1pt等于1/72英寸）
PC：12点活字
Px：像素
（一）文本
1.大小写转换
text-transform属于处理文本的大小写，有4个值：
- none（默认值）
- uppercase（全部大写）
- lowercase（全部小写）
- capitalize（首字母大写）
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t1{
text-transform:uppercase;
}
.t2{
text-transform:lowercase;
}
.t3{
text-transform:capitalize;
}
</style>
</head>
<body>
<p>ssss</p>
<p class="t1">sss</p>
<p class="t2">AAA</p>
<p class="t3">string</p>
</body>
</html>
2.文本线条
text-decoration有5个值：
- none
- underline
- overline
- line-through
- blink（以前只有Firefox支持，现在也不支持了）
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t1{
text-decoration:underline;
}
.t2{
text-decoration:overline;
}
.t3{
text-decoration:line-through overline underline;
}
</style>
</head>
<body>
<p>ssss</p>
<p class="t1">sss</p>
<p class="t2">AAA</p>
<p class="t3">string</p>
</body>
</html>
3.文本阴影
text-shadow属性，参数顺序为：阴影颜色，水平偏移量，垂直偏移量，模糊度
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t1{
text-shadow:rgb(0,0,255) 5px 5px 5px;
}
/*.t2{
text-decoration:overline;
}
.t3{
text-decoration:line-through;
}*/
</style>
</head>
<body>
<!-- <p>ssss</p> -->
<p class="t1">sss</p>
<!-- <p class="t2">AAA</p>
<p class="t3">string</p> -->
</body>
</html>
4.文本空白
white-space属性，默认值normal，空白会被浏览器忽略。
例子：如果打出多个空白，除了使用<pre>与转义字符 ；之外还可以：
<style type="text/css">
.t1{
white-space:pre;
}
</style>
<body>
<p class="t1">sss eeeeee wwww
wwwwwww</p>
</body>
但是上述操作不会自动换行。
white-space:pre-line;//可以自动换行，但是会合并空格
white-space:pre-wrap;;//可以自动换行，不会合并空格
white-space:nowrap;//不换行，合并空格
5.文本溢出
overflow：hidden;隐藏
text-overflow:ellipsis;(把隐藏的内容用…代替）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t1{
width: 200px;
border:solid 1px red;
white-space:nowrap;
overflow: hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<!-- <p>ssss</p> -->
<p class="t1">
sss eeeeee wwwwdddsdsdsds fff
属性你手机
</p>
</body>
</html>
当鼠标放上去是，让隐藏的内容出现
p:hover{
overflow: visible;
}
- visible：是默认值，内容不会被修剪，会显示在元素框外
- hidden：内容被隐藏，且其余内容不可见
- scroll：内容被修剪，但是浏览器会显示滚动条以便查看其他内容
- auto：如果内容被修剪，则浏览器会显示滚动条以便查看其他内容
6.对齐与缩进
text-indent，设置首行缩进
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t1{
white-space:pre-line;
text-indent:20px;
}
</style>
</head>
<body>
<p class="t1">sss eeeeee wwwwdddsdsdsds fff
属性你手机
</p>
</body>
</html>
text-indent的值设置像素时，如果字体发生变化，它缩进的大小就会改变，耦合行很强
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t1{
font-size: 50px;/*将字体大小改为20px*/
white-space:pre-line;
text-indent:20px;
}
</style>
</head>
<body>
<p class="t1">sss eeeeee wwwwdddsdsdsds fff
属性你手机
</p>
</body>
</html>
现在将text-indent设置为2em
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t1{
font-size: 50px;/*将字体大小改为20px*/
white-space:pre-line;
text-indent:2em;
}
</style>
</head>
<body>
<p class="t1">提供即时免费的中文、英语、日语、韩语、法语、德语、俄语、西班牙语、
葡萄牙语、越南语、印尼语、意大利语全文翻译、网页翻译、文档翻译服务。
</p>
</body>
</html>
text-align只对元素中的文本有效，对元素无效
值：left，center，right，justify
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/c**ss">
.t1{
text-align: center;
}
.t2{
text-**align:left;
}
.t3{
text-align:right;
}
</style>
</head>
<body>
<p class="t1">t1今天真好</p>
<p class="t2">t2今天真好</p>
<p class="t3">t3今天真好</p>
</body>
</html>
justify可以实现两端对齐（两端对齐是要求有宽度的，需要对文本外的框设置宽度；且只有一行填满才会显示两端对齐，一行没有填满，就不会显示）
例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t4{
width: 200px;
border: solid 1px red;
text-align: justify;
}
</style>
</head>
<body>
<p class="t4">今天真好今天真好今天真好今天真好今天真好今天真好</p>
</body>
</html>
改进：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.t4{
width: 200px;
border: solid 1px red;
text-align: justify;
}
p span{
display: inline-block;
width: 100%;
}
/* 或者p:after{
content: "";
display: inline-block;
width: 100%;
}*/
</style>
</head>
<body>
<p class="t4">今天真好今天真好今天真好今天真好<span></span></p>
</body>
</html>
垂直对齐：
vertical-align，使用满足两点，文本，inline类元素或表格单元格
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放在父元素的基线上 |
| sub | 垂直对齐文本的下标 |
| super | 垂直对齐文本的上标 |
| top | 把元素的顶端与行中最高元素顶端对齐 |
| text-top | 把元素的顶端与父元素字体的顶端对齐 |
| middle | 把此元素放在父元素中部 |
| bottom | 把元素的顶端与行中最低元素顶端对齐 |
| text-bottom | 把元素的底端与父元素字体的底端对齐 |
| length | |
| % | 使用line-height属性的百分比值来排列此元素允许使用负值 |
html-0的更多相关文章
- ZAM 3D 制作简单的3D字幕 流程(二)
原地址:http://www.cnblogs.com/yk250/p/5663907.html 文中表述仅为本人理解,若有偏差和错误请指正! 接着 ZAM 3D 制作简单的3D字幕 流程(一) .本篇 ...
- ZAM 3D 制作3D动画字幕 用于Xaml导出
原地址-> http://www.cnblogs.com/yk250/p/5662788.html 介绍:对经常使用Blend做动画的人来说,ZAM 3D 也很好上手,专业制作3D素材的XAML ...
- 微信小程序省市区选择器对接数据库
前言,小程序本身是带有地区选着器的(网站:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html),由于自己开发的程序的数据是很 ...
- osg编译日志
1>------ 已启动全部重新生成: 项目: ZERO_CHECK, 配置: Debug x64 ------1> Checking Build System1> CMake do ...
- 【AR实验室】OpenGL ES绘制相机（OpenGL ES 1.0版本）
0x00 - 前言 之前做一些移动端的AR应用以及目前看到的一些AR应用,基本上都是这样一个套路:手机背景显示现实场景,然后在该背景上进行图形学绘制.至于图形学绘制时,相机外参的解算使用的是V-SLA ...
- Elasticsearch 5.0 中term 查询和match 查询的认识
Elasticsearch 5.0 关于term query和match query的认识 一.基本情况 前言:term query和match query牵扯的东西比较多,例如分词器.mapping ...
- Swift3.0服务端开发(一) 完整示例概述及Perfect环境搭建与配置（服务端+iOS端）
本篇博客算是一个开头,接下来会持续更新使用Swift3.0开发服务端相关的博客.当然,我们使用目前使用Swift开发服务端较为成熟的框架Perfect来实现.Perfect框架是加拿大一个创业团队开发 ...
- vue2.0实践的一些细节
最近用vue2.0做了个活动.做完了回头发现,好像并没有太多的技术难点,而自己好像又做了比较久...只能说效率有待提升啊...简单总结了一些比较细节的点. 1.对于一些已知肯定会有数据的模块,先用一个 ...
- Linux平台 Oracle 10gR2（10.2.0.5）RAC安装 Part3：db安装和升级
Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part3:db安装和升级 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 5.安装Database软件 5. ...
- Linux平台 Oracle 10gR2（10.2.0.5）RAC安装 Part1：准备工作
Linux平台 Oracle 10gR2(10.2.0.5)RAC安装 Part1:准备工作 环境:OEL 5.7 + Oracle 10.2.0.5 RAC 1.实施前准备工作 1.1 服务器安装操 ...
随机推荐
- Python单元测试之道：从入门到精通的全面指南
在这篇文章中,我们会深入探讨Python单元测试的各个方面,包括它的基本概念.基础知识.实践方法.高级话题,如何在实际项目中进行单元测试,单元测试的最佳实践,以及一些有用的工具和资源 一.单元测试重要 ...
- linux内核编译中常用的目标（二）
文章目录 一. 目标 all 或者 空 二. 目标 vmlinux 三. 目标 modules 四. 目标 Image/zImage/uImage 1.Image和zImage的区别 2.uImage ...
- python3 使用位图排序
代码 from bitmap import BitMap a=[1,5,3,4,7,8,15,6,9] print(a) bm=BitMap(max(a)) #print(dir(bm)) print ...
- linux文本编辑YCM报错
linux文本编辑YCM报错 刚从github安装了vimplus,可是发现存在不少的问题.索性给直接记录一下. The ycmd server SHUT DOWN (restart with ':Y ...
- QMainWindow类中比较重要的方法
方法和描述 addToolBar():添加工具栏 centralWidget():返回窗口中心的一个空间,未设置时返回NULL menuBar(): 返回主窗口的菜单栏 setCentralWidge ...
- win10安装mysql-8.0.19-winx64
第一步:去官网下载安装 (重点)第二步:先解压,然后在mysql下创建一个my.ini文件,更改my.ini文件里面的两行安装目录,第二行加上\data,my.ini文件不能多或少一个符号,内容见文章 ...
- Prism报错
Rules.Default..WithoutFastExpressionCompiler()报错 说没有找到容器 1.查看Prism.Wpf源码 获取DryIoc容器规则 2.证明项目中出现了另外一个 ...
- 【page cache】回写机制
目录 writeback 回写 相关结构体 底层设备信息 初始化 部分字段说明 设备回写管理 初始化 部分字段说明 回写任务 部分字段说明 回写线程 初始化 立即唤醒 wb_wakeup wb_que ...
- 【故障公告】一而再，再而三，三翻四复：数据库服务器 CPU 100%
会员救园,故障捣乱,每当困难时,故障们总是喜欢雪上加霜过来考验你. 今天下班前 17:43~17:47 期间,园子的 SQL Server 数据库服务器突然出现 CPU 100% 问题. 发现问题后, ...
- 纯前端导出word手写复杂表格，并还原成word。百分百还原表格。一文搞定前端表格导出为word
本次的需求是手写一个养老院老人生活能力评定表,并且要能够录入信息,最终导出 表格因为有七页所以代码很多,可以不用看表格模板的详细代码. 先贴上最终效果图 填写完导出之后 基本上实现了样式的百分百还原导 ...