css美化页面
css美化页面
如果在我们一行文字中，想让某个文字凸显出来，使用span！
1.字体样式
font-style:字体的风格 italic normal
font-weight:字体的粗细 normal(默认400) bold(700) bolder 最大到900
font-size:字体的大小 10px 2em rem pc pt
font-family:字体的类型，比如我们的楷体，隶书,宋体。。。。。
font：风格 粗细 大小 类型
在一起设置属性的时候，四种属性顺序不能颠倒！
2.文本样式
color:文本颜色 red 16进制颜色码 rgb rgba
rgb(red,green,blue)正数取值 0-255
rgba(red,green,blue,alpha)
alpha的取值必须是0-1 0不显示 1正常显示
text-align:文本元素的水平对齐方式
center left right justify(两端对齐)
line-height:文本的行高!
如果想设置文本的垂直居中line-height的值必须等于height的值
text-indent:设置首行缩进
p{
text-indent:2em; 设置p首行缩进2个字符
}
text-decoration:文本的装饰
none:默认值
underline:下划线
overline:上划线
line-through:删除线
text-shadow:文本阴影
3.display 可以实现 块元素和行内元素的互换！
inline inline-block block
4.超链接伪类
结构伪类选择器：
div:nth-of-type() :nth-child
css伪类是一个特殊的类！ 它针对于我们设置的css选择器起作用！
css伪类的语法：
选择器:伪类名｛
属性:属性值;
｝
:link ==> 还没有点击超链接的样式
:visited ==> 点击之后超链接的样式
:hover ==> 鼠标悬停在超链接的样式
:active ==> 鼠标点击未释放超链接的样式
love hate
如果同时给一个选择器设置超链接伪类样式，那么顺序是必须不变的！
5.列表样式
list-style-type 列表符号样式
none 无符号
disc 实心圆
circle 空心圆
decimal 数字 .....
list-style-image 列表图片 url
list-style-position 列表符号是否被li包含，默认是ul包含
list-style 列表样式
如果同时设置了type和image 那么image会覆盖type！和书写先后顺序没关系！
6.背景样式
background-color:背景色
background-image:背景图片
background-position:背景位置
background-repeat:背景重复方式
repeat:默认方式 水平和垂直都平铺
no-repeat:不平铺，只有一个图片
repeat-x:水平平铺
repeat-y:垂直平铺
background: 背景色 背景图片 背景位置 平铺方式
虽然没有固定顺序，但是我们有个默认的写法！
如果我们相对背景图片的大小进行设置！那么请使用background-size
background-size:contain;
background-size：背景图片的尺寸
auto:默认值，使用图片的大小
cover:让整个图片正好填充整个盒子
contain：让图片自动的方法或者缩小 适应盒子的大小
percentage：使用百分比 手动的校正图片在盒子中的大小
7.渐变属性
linear-gradient:(方向,color1,color2)
to top :方向
red:第1个颜色
black:第2个颜色
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>span标签</title>
<!--span标签
想让某些文字凸显出来
-->
<style type="text/css">
div:first-child span{
color: red;
} div:last-child span{
color: green;
}
/*同时设置body中的子元素span的风格 粗细 大小 类型*/
body>span{
font: oblique bold 50px "楷体";
color: red;
} </style> </head>
<body>
<div><span>今天</span>是个好日子！</div>
<div><span>明天</span>也是个好日子！</div>
<span>a</span>bcdefg
</body>
</html>
span标签
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>字体样式</title> <style type="text/css"> div{
/*01.设置字体的类型*/
font-family:"楷体" ;
/*02.设置字体的风格*/
font-style: italic;
/*03.设置字体的大小 可以设置数值*/
font-size:small;
/*04.设置字体的粗细 可以设置数值*/
font-weight: bold;
}
/* 简写方式==》同时设置 字体的 风格,粗细,大小 ，类型 顺序不能发生变化*/
span{
font:italic bolder 60px "楷体";
}
</style>
</head>
<body> <div><span>今天</span>是个好日子！</div>
<div><span>明天</span>也是个好日子！</div>
</body>
</html>
字体样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>display属性</title>
<!-- 实现 块元素和 内联元素的相互转换 --> <!-- 需求：
01.设置块元素2和3 在一行显示
02.设置块元素2和3 的边框和宽度 高度 ==>因为已经变成了内联元素 所以宽度 高度 无效
03.我们想块元素2和3 在一行显示 但是 还能设置 宽度 高度 ？？？display: inline-block;
04.把内联元素3 变成块元素 并且设置 宽度 高度
-->
<style type="text/css">
div:nth-of-type(2),div:nth-of-type(3){
/* display: inline; 内联元素*/
display: inline-block; /* 行内块元素*/
border: 1px solid red;
height: 50px;
width: 50px;
}
span:nth-child(3){
border: 1px solid red;
display:block;/*块元素*/
height: 50px;
width: 50px;
} </style> </head>
<body> <span>内联元素1</span>
<span>内联元素2</span>
<span>内联元素3</span> <div>块元素1</div>
<div>块元素2</div>
<div>块元素3</div> </body>
</html>
display属性
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>文本样式</title> <style type="text/css">
/* 01.设置文本的颜色
RGB： red green blue
rgb(red ,green,blue) 每个颜色的数值范围是0-255
rgba(50,100,50,0.2) 最后一个参数 设置透明度 alpha 取值是0-1
16进制的颜色码 #020202
前两位代表R的分量
中间两位代表G的分量
后两位代表B的分量 02.设置文本的对齐方式
text-align center right left 03.设置文本的垂直居中
我们设置的line-height的值要和 盒子的 height属性值一致！ 04.文本的装饰
text-decoration: line-through; 删除线
text-decoration: underline; 下划线
text-decoration: overline; 上划线
05.文本的阴影
text-shadow:red 2px 3px 1px ;
red:阴影的颜色
2px：x轴的位移
3px：y轴的位移
1px：阴影的模糊范围 值越小 看到的文本越清晰
*/
div{
/*color: rgb(50,100,50);只是设置文本颜色*/
color: rgba(50,100,50,0.8); /*设置颜色的同时设置透明度*/
text-align: left;/*水平居中方式*/
text-indent: 2em;/*首行缩进*/
border: 1px solid red;
height: 100px;
line-height:100px ; /*行高*/
text-decoration: underline;
text-shadow:red 2px 2px 1px ;/*文本的阴影*/
} </style> </head>
<body>
<div>现价 500</div>
<div>原价 900</div>
</body>
</html>
文本样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>超链接伪类</title>
<!--
a:link 我们还没有访问超链接时的样式
a:visited 访问之后超链接的样式
a:hover 鼠标悬停在超链接上的样式
a:active 鼠标点击未释放
顺序一定不能有误！
--> <style type="text/css">
a:link{
color: red;
}
a:visited{
color: greenyellow;
}
a:hover{
color: deeppink;
}
a:active{
color: yellow;
} div[id="haha2"]:hover{
color: red;
text-shadow: pink 2px 2px 1px;
} span:hover{
background: red;
} </style> </head>
<body> <span>haha</span>
<a href="#">大家辛苦了！</a> <div id="haha">哈哈</div>
<div id="haha1">哈哈1</div>
<div id="haha2">哈哈2</div>
</body>
</html>
超链接伪类
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表样式</title> <style type="text/css">
/*01.去掉列表前面实心圆点
list-style-type: none;
list-style-type:设置前面默认的样式 02.把默认的小圆点换成图片
list-style-image: url("../images/a.jpg"); 03.设置li和图标的关系
li是否包含前面的小图标
*/
li{
list-style-position: inside;
/* list-style-image: url("../images/a.jpg");
list-style-type: disc;*/
}
</style>
</head>
<body>
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
</ul>
</body>
</html>
列表样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>背景样式</title> <style type="text/css"> div{
border: 1px solid red;
height: 200px;
width: 200px;
background-color: aqua; /* 01.给div增加背景颜色*/
background-image: url("../images/b.png"); /* 02.给div增加背景图片 图片会把颜色覆盖，其实颜色在图片后面*/
background-repeat: no-repeat;/*03.设置图片的填充方式*/
/* background-position: 20px 10px;04.设置图片定位 设置size时 需要 注释*/
/* background:color image position repeat ; 简写的规范*/
/*
background-size:contain;
background-size：背景图片的尺寸
auto:默认值，使用图片的大小
cover:让整个图片正好填充整个盒子
contain：让图片自动的方法或者缩小 适应盒子的大小
percentage：使用百分比 手动的校正图片在盒子中的大小 100%;
*/
} </style> </head>
<body>
<div></div> </body>
</html>
背景样式
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>渐变属性</title>
<!--
01.线性渐变
颜色按照从上到下或者从左到右 等顺序发生的变化
02.径向渐变
不是按照直线的顺序！ 圆形，椭圆！从一个点向所有的方向混合！
--> <style type="text/css">
div{
border: 1px solid red;
height: 200px;
width: 200px;
background: linear-gradient(to left top,red,green);
/* to top :方向
red:第1个颜色
black:第2个颜色
IE浏览器是Trident内核，加前缀：-ms-
Chrome浏览器是Webkit内核，加前缀：-webkit-
Safari浏览器是Webkit内核，加前缀：-webkit-
Opera浏览器是Blink内核，加前缀：-o-
Firefox浏览器是Mozilla内核，加前缀：-moz-
*/
} </style> </head>
<body> <div></div> </body>
</html>
渐变属性
css美化页面的更多相关文章
- CSS美化页面滚动条
文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将 ...
- CSS之美化页面
CSS之美化页面 <span></span> 标签 <span>行内定义一个区域 就是说一行可以被<span>划分多个小区域,从而实现某种特定效果.&l ...
- html div+css做页面布局
http://blog.csdn.net/mercop/article/details/7882000 HTML CSS + DIV实现整体布局 1.技术目标: 开发符合W3C标准的Web页面 理解盒 ...
- CSS美化自己的完美网页
CSS美化自己的完美网页 CSS概述 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的h ...
- 学习笔记 第十章 使用CSS美化表单
第10章 使用CSS美化表单 [学习重点] 正确使用各种表单控件 熟悉HTML5新增的表单控件 掌握表单属性的设置 设计易用性表单页面 10.1 表单的基本结构 表单包含多个标签,由很多控件组成 ...
- 学习笔记 第八章 使用CSS美化列表
第8章 使用CSS美化列表 8.1 列表的基本结构 在HTML中,列表结构可以分为两种基本类型:有序列表和无序列表.使用标签如下: <ul>...</ul>:标识无序列表: ...
- 学习笔记 第七章 使用CSS美化超链接
第7章 使用CSS美化超链接 学习重点 认识超链接 熟悉伪类 定义超链接样式 能够灵活设计符合页面风格的链接样式 7.1 定义超链接 在HTML5中建立超链接需要两个要素:设置为超链接的网页元素和 ...
- 学习笔记 第六章 使用CSS美化图片
第六章 使用CSS美化图片 6.1 在网页中插入图片 GIF图像 跨平台能力,无兼容性问题: 具有减少颜色显示数目而极度压缩文件的能力,不会降低图像的品质(无损压缩): 支持背景透明功能,便于图像 ...
- 学习笔记 第五章 使用CSS美化网页文本
第五章 使用CSS美化网页文本 学习重点 定义字体类型.大小.颜色等字体样式: 设计文本样式,如对齐.行高.间距等: 能够灵活设计美观.实用的网页正文版式. 5.1 字体样式 5.1.1 定义字体 ...
随机推荐
- Fluxion无线攻击
使用步骤 github地址 https://github.com/deltaxflux/fluxion 进入到fluxion目录下 ./fluxion 启动fluxion 启动之后会先检测没有安装的 ...
- 外网访问内网Elasticsearch WEB
外网访问内网Elasticsearch WEB 本地安装了Elasticsearch,只能在局域网内访问其WEB,怎样从外网也能访问本地Elasticsearch? 本文将介绍具体的实现步骤. 1. ...
- 自制操作系统Antz(6)——内核初步，引入c语言
Antz系统更新地址: https://www.cnblogs.com/LexMoon/category/1262287.html Linux内核源码分析地址:https://www.cnblogs. ...
- shell实现自动部署两台tomcat项目Ⅱ
本次分为3个脚本, scp.sh放进第一台机器(负责传输文件), schenglee.sh放进第一台机器(自动部署), schenglee2.sh放进第二台机器(自动部署) 环境 tomcat1: 1 ...
- opencv学习之路（26）、轮廓查找与绘制（五）——最小外接矩形
一.简介 二.轮廓最小外接矩形的绘制 #include "opencv2/opencv.hpp" using namespace cv; void main() { //轮廓最小外 ...
- bash的基础特性
命令历史:history 环境变量: HISTSIZE: 命令历史的条数 HISTFILE:~/.bash_history HISTFILESIZE: 命令历史文件记录历史的条数 history -d ...
- HDU 6166 Senior Pan（k点中最小两点间距离）题解
题意:n个点,m条有向边,指定k个点,问你其中最近的两点距离为多少 思路:这题的思路很巧妙,如果我们直接枚举两点做最短路那就要做C(k,2)次.但是我们换个思路,我们把k个点按照二进制每一位的0和1分 ...
- Unity3D_UGUI判断鼠标或者手指是否点击在UI上
比如战斗场景,UI和3D场景同时都需要响应触摸事件,如果同时响应可能就会出现触摸UI的时候影响到了3D部分.为了解决这个问题在判断3D响应之前要先判断手指是否点击在UI上. 以前NGUI的时候都是自己 ...
- 在WPF中调用文件夹浏览/选择对话框
var dialog = new System.Windows.Forms.FolderBrowserDialog(); System.Windows.Forms.DialogResult resul ...
- 8th，常用模块、正则表达式
re模块 什么是正则? 正则就是用一些具有特殊含义的符号组合到一起(正则表达式)来描述字符或者字符串的方法.或者说:正则就是用来描述一类事物的规则.内嵌在Python中,通过re模块实现.正则表达式模 ...