作用与字体样式

1.字体基本样式

span：可以套住重点要突出的字

字体样式

font-family：字体格式
font-size：字体大小
font-weight：粗细

color：字体颜色

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>p{font-family: 方正粗黑宋简体;font-weight: bolder;font-size: 20px;}#xi{color: #82fff7;}.yi{color: #14681a;}</style>
</head>
<body>
<p>我是</p>
<p class="yi">遇事不决</p>
<p id="xi">可问春风</p>
</body>
</html>

2.文本样式

颜色：rgba()a是透明度, rgb(), RGB
文本对齐：text-aligncenter
首行缩进：text-indent=2em
行高：line-height

装饰：text-decoration

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文本样式</title><style>body p{font-weight: bolder;color: #14681a;height: 50px;background-color: #feff22;line-height: 50px;text-align: center;}.xi1{text-decoration: line-through;}.xi2{text-decoration: underline;}.xi3{text-decoration: overline;}</style>
</head>
<body>
<p class="xi3">书山有路勤为径</p>
<p class="xi1">敏而好学，不耻下问</p>
<p class="xi2">学海无涯苦作舟</p>
</body>
</html>

3.超链接伪类

text-align：文本位置
hover：鼠标悬停状态
active：鼠标按住未释放状态

代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超链接伪类</title><style>body{text-align: center;}/*鼠标悬停状态*/p:hover{color: #14681a;}/*鼠标按住未释放状态*/p:active{color: rgba(255,127,33,0.98);font-size: 20px;font-weight: bolder;}</style>
</head>
<body>
<a href="#"><img src="resurce/4.jpg" alt="">
</a>
<p>作者：马特</p>
<p>出版：人民邮电出版社</p>
<p>价格：￥99.00</p>
</body>
</html>

4.列表样式

list-style：去掉无序列表前的黑点或有序列表前的数字
list-style：circle表示空心圆
list-style：decimal表示数字
list-style：square表示正方形

示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body>
<div>
<link rel="stylesheet" href="css/style1.css">
<h3 id="xiBa">排列数字</h3>
<ul><li><a href="">11</a>&nbsp&nbsp&nbsp<a href="">12</a></li><li><a href="">21</a>&nbsp&nbsp&nbsp<a href="">22</a></li><li><a href="">31</a>&nbsp&nbsp&nbsp<a href="">32</a></li><li><a href="">41</a>&nbsp&nbsp&nbsp<a href="">42</a></li><li><a href="">51</a>&nbsp&nbsp&nbsp<a href="">52</a></li>
</ul>
</div>
</body>
</html>

css代码如下：

div{width: 214px;background-color: #f5deb3;text-align: left;
}
#xiBa{background-color: #e66465;text-indent: 2.5em;color: #21336a;
}
ul li{list-style: none;background-color: wheat;text-indent: 1em;height: 30px;
}
a{text-decoration: none;color: #9198e5;
}
a:hover{color: rgba(68, 64, 44, 0.98);
}
a:active{color: rgba(121, 52, 114, 0.98);font-size: 20px;
}

效果如下

5.背景图片

backgrand-image:图片背景
backgrand-position:图片背景位置
backgrand-repeat:图片是否重复
- no repeat:不重复
- repeat-x:横向填充
- repeat-y:纵向填充
在4列表样式的基础上加一个背景图片填充的样式
补充ul li和h3的代码如下：

ul li{list-style: none;background-color: wheat;text-indent: 1em;height: 30px;background-image: url("../images/21.png");background-position: 1px 4.5px;background-repeat: no-repeat;
}
h3{background: #e66465 url("../images/21.png") 190px 9px no-repeat ;
}

结果如图：
渐变简单了解：
- 线性渐变(linear-gradient)
  - 基础用法：background:linear-gradient(angle,start-color,soft-line,end-color)
- 径向渐变（radial-gradient）
  - 基础语法：radial-gradient(shape,start-color, soft-line,end-color )
附加一个渐变代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>body{line-height: 400px;text-align: center;}#grad1 {height: 400px;background-color: red;background-image: linear-gradient(to right bottom, #f5f5dc, #ffc0cb);}
</style>
</head>
<body>
<div id="grad1">
西内西内西内！
</div>
</body>
</html>

效果如下：（颜色接近，效果不太明显）

1.23CSS3部分基本样式（1）相关推荐

【B/S实践】解决：vs中修改样式表后不起作用的问题
缓存,有好多,cpu和内存之间的三级缓存,浏览器内的缓存! 缓存是因为速率不对等,通过缓存来加速内容的显示! 今天我在敲牛腩的时候遇到一个问题,找了半小时,才发现是缓存导致的问题! 试着运行aspx文 ...
Python：matplotlib实践：直方图、散点图展示、变色、线条变换、点样式变换、添加名称、设置横纵轴范围、在一张图上显示多条线
直方图: ''' 来源:天善智能韦玮老师课堂笔记作者:Dust ''' # 折线图.散点图 import matplotlib.pylab as pyl import numpy as npy x= ...
html 样式的几种实现方法
html 样式 : 一般使用 css 来渲染HTML元素标签的样式. 一般有四种方法实现 1 行内样式在HTML标签中直接用style添加 , 最直接,同时修改也很不方便一般呢都不建议使用如下 ...
android Style(样式)的解析
先说下为啥要使用样式吧,举个例子来说吧当要做这样的一个布局的时候每个标签都要写的话,会感觉怎样 <LinearLayoutandroid:layout_width="match_p ...
常用样式积累-scss
/*** author ctj -- 自定义公用样式*/ /*清除浮动*/ .clearfix:after {height: 0;content: '';display: block;clear: b ...
java中对Excel的创建、样式修改
创建excel文件 public static String createExcel(ArrayList<String> list, ArrayList<ArrayList<S ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...
Windows Phone开发（16）：样式和控件模板
在前面资源一文中也提过样式,样式就如同我们做HTML页排版时常用到的CSS样式表,它是对于特定娄型的可视化元素,应该可以直接说是针对控件的一种可重用的属性设置列表,这样对于需要设置相同属性值的同类型的 ...
Android UI 统一修改Button控件的样式，以及其它系统控件的默认样式
先介绍下修改原理:首先打开位于android.widget包下面的Button.java文件,这里有一句关键的代码如下: public Button(Context context, Attribut ...

1.23CSS3部分基本样式（1）

作用与字体样式

1.字体基本样式

2.文本样式

3.超链接伪类

4.列表样式

5.背景图片

1.23CSS3部分基本样式（1）相关推荐

最新文章

热门文章