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>
 

最新文章

  1. 提高(Android)开发效率的工具与网站
  2. 深度掌握SVG路径path的贝塞尔曲线指令
  3. webapp项目前端总结
  4. ASP.NET开发规范:OWIN
  5. 如何学习ACM
  6. 定制滚动条样式 webkit
  7. 非阻塞IO服务器模型
  8. Obj-C中内存的管理一瞥
  9. Vue.js02:数据绑定v-model用法
  10. js 生成随机炫彩背景
  11. es6的let,const
  12. 【做题】ZJOI2017仙人掌——组合计数
  13. xftp无法用root账号登录问题
  14. VMware14安装centos7
  15. P&lt;0.05就够了?还要校正!校正!3个方法献上
  16. 重新认识Javascript的一些误区总结
  17. 欧拉筛——$O(n)$复杂度的质数筛法
  18. HDU 5358 First One(枚举)
  19. eShopOnContainer 第一步
  20. Golang 中操作 Mongo Update 的方法

热门文章

  1. the resource is not on the build path of a java project错误
  2. 模板 Fail树
  3. BZOJ2243: [SDOI2011]染色(树链剖分/LCT)
  4. 如何优雅的写UI——(1)MFC六大核心机制-程序初始化
  5. 【Codeforces Round #446 (Div. 2) A】Greed
  6. css使文本保留多个空格
  7. (转)Oracle RAC日常管理命令
  8. 在 Windows 10 x64 上安装及使用 ab 工具的流程
  9. 【零基础入门学习Python笔记012】一个打了激素的数组3
  10. [React Intl] Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers