css3-5 css3鼠标、列表和尺寸样式怎么用(文字有关的样式会被继承)
2024-08-31 21:31:32
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>
最新文章
- 提高(Android)开发效率的工具与网站
- 深度掌握SVG路径path的贝塞尔曲线指令
- webapp项目前端总结
- ASP.NET开发规范:OWIN
- 如何学习ACM
- 定制滚动条样式 webkit
- 非阻塞IO服务器模型
- Obj-C中内存的管理一瞥
- Vue.js02:数据绑定v-model用法
- js 生成随机炫彩背景
- es6的let,const
- 【做题】ZJOI2017仙人掌——组合计数
- xftp无法用root账号登录问题
- VMware14安装centos7
- P<;0.05就够了?还要校正!校正!3个方法献上
- 重新认识Javascript的一些误区总结
- 欧拉筛——$O(n)$复杂度的质数筛法
- HDU 5358 First One(枚举)
- eShopOnContainer 第一步
- Golang 中操作 Mongo Update 的方法
热门文章
- the resource is not on the build path of a java project错误
- 模板 Fail树
- BZOJ2243: [SDOI2011]染色(树链剖分/LCT)
- 如何优雅的写UI——(1)MFC六大核心机制-程序初始化
- 【Codeforces Round #446 (Div. 2) A】Greed
- css使文本保留多个空格
- (转)Oracle RAC日常管理命令
- 在 Windows 10 x64 上安装及使用 ab 工具的流程
- 【零基础入门学习Python笔记012】一个打了激素的数组3
- [React Intl] Use Webpack to Conditionally Include an Intl Polyfill for Older Browsers