css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）
css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）
一、总结
一句话总结：css标签中文字有关的样式会被继承。由常用样式记起。
1、鼠标常用样式有哪些？
cursor:pointer;
2、列表常用样式有哪些？
list-style-type:none
list-style-type:decimal
list-style-type:square
3、css标签中文字有关的样式会被继承，其它样式会怎样？
也会被继承，但是一般无法生效，分情况，反正快标签的宽高行标签继承了也没用。
4、如何设置一个标签的最小宽度？
minwidth属性
12 ul{
13 width:100%;
14 min-width:1200px;
5、如何去掉textarea的大小可变？
将resize属性设置为none
11 textarea{
12 width:500px;
13 height:100px;
14 resize:none;
15 }
二、css3鼠标、列表和尺寸样式怎么用
1、相关知识
鼠标:
cursor:crosshair;
cursor:crosshair;
cursor:pointer;
cursor:wait;
cursor:text;
cursor:default;
cursor:help;
列表(list-style-type):
none
disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
尺寸:
width:1200px;
height:500px;
2、代码
样式继承
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
p{
font-size: 20px;
font-family: 微软雅黑;
color:#f00;
font-weight:bold;
font-style:italic;
word-spacing:15px;
} </style>
</head>
<body>
<div>
<p><span>linux php linux</span></p>
<p><span>linux linux php linux</span></p>
<p><span>linux linux php linux</span></p>
<p><span>linux linux php linux</span></p>
</div>
</body>
</html>
textarea文本域
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
} textarea{
width:500px;
height:100px;
resize:none;
}
</style>
</head>
<body>
<form action="">
<p>用户名:</p>
<p>
<input type="text" name='username'>
</p> <p>留言:</p>
<p>
<textarea name="mess"></textarea>
</p>
</form>
</body>
</html>
min-width最小宽度
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
*{
font-family: 微软雅黑;
margin:0px;
} ul{
width:100%;
min-width:1200px;
background: #272822;
list-style-type:none;
padding-left:0px;
line-height:40px;
height:40px;
} ul li{
float:left;
margin-left:15px;
} ul a{
color:#fff;
text-decoration:none;
}
</style>
</head>
<body>
<ul>
<li><a href="">百度</a></li>
<li><a href="">新浪</a></li>
<li><a href="">网易</a></li>
<li><a href="">腾讯</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<li><a href="">淘宝</a></li>
<div style='clear:both'></div>
</ul>
</body>
</html>
css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）的更多相关文章
- 11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...
- 30款css3实现的鼠标经过图片显示描述特效
今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- 一款纯css3实现的鼠标经过按钮特效
今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div align=&qu ...
- 纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- CSS3：CSS3 背景
ylbtech-CSS3:CSS3 背景 1.返回顶部 1. CSS3 背景 CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制. 在本章您将了解以下背景属性: background ...
- CSS3：CSS3 圆角
ylbtech-CSS3:CSS3 圆角 1.返回顶部 1. CSS3 圆角 CSS3 圆角 使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". C ...
- CSS3：CSS3 边框
ylbtech-CSS3:CSS3 边框 1.返回顶部 1. CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. ...
- CSS3：CSS3 简介
ylbtech-CSS3:CSS3 简介 1.返回顶部 1. CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2. CSS3 模块 CSS3被拆分为&quo ...
随机推荐
- cookie和session笔记
1.http协议是无连接的,即每一次http请求都是新的,和上一次没有联系,这不利于和用户的交互.针对这一缺点产生了cookie. 2.cookie是一段保存在客户端上的验证信息,同一个域使用同一个c ...
- 四、Docker+Tomcat
原文:四.Docker+Tomcat 一.下载Tomcat镜像 具体可以search 搜索tomcat 相关镜像 docker pull sonodar/jdk8-tomcat8 二.创建容器 doc ...
- 【2017百度之星程序设计大赛 - 复赛】Valley Numer
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=6148 [题意] 在这里写题意 [题解] 先把1..N里面的山峰数字个数算出来->x 然后用N减去这 ...
- geotools修改shapefile 属性名乱码问题
在GeoServer中文社区的讨论地址为:http://opengeo.cn/bbs/read.php?tid=1701&page=e&#a 使用geotools修改shapefile ...
- HDU 3584 Cube （三维树状数组）
Problem Description Given an N*N*N cube A, whose elements are either 0 or 1. A[i, j, k] means the nu ...
- [Javascript] Different ways to create an new array/object based on existing array/object
Array: 1. slice() const newAry = ary.slice() 2. concat const newAry = [].concat(ary) 3. spread oprea ...
- home-界面返回上一级功能
1,这个主要是用在actionbar上home键,直接上代码 import android.view.MenuItem; /* Vanzo:zhangshuli on: Mon, 23 Mar 201 ...
- 妙味css3课程---1-1、css中自定义属性可以用属性选择器么
妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...
- Flume Sink Processors官网剖析（博主推荐）
不多说,直接上干货! Flume Sources官网剖析(博主推荐) Flume Channels官网剖析(博主推荐) Flume Channel Selectors官网剖析(博主推荐) Flume ...
- (转) 如何取消Linux下，vi中显示的^M符号
转自:http://www.cnblogs.com/dkblog/archive/2012/02/03/2337187.html [背景知识] ^M 是ascii中的'\r', 回车符,是16进制的0 ...