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、代码
样式继承
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 p{ 8 font-size: 20px;
9 font-family: 微软雅黑;
10 color:#f00;
11 font-weight:bold;
12 font-style:italic;
13 word-spacing:15px;
14 }
15
16 </style>
17 </head>
18 <body>
19 <div>
20 <p><span>linux php linux</span></p>
21 <p><span>linux linux php linux</span></p>
22 <p><span>linux linux php linux</span></p>
23 <p><span>linux linux php linux</span></p>
24 </div>
25 </body>
26 </html>textarea文本域
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{ 8 font-family: 微软雅黑;
9 }
10
11 textarea{12 width:500px;
13 height:100px;
14 resize:none;
15 }
16 </style>
17 </head>
18 <body>
19 <form action="">
20 <p>用户名:</p>
21 <p>
22 <input type="text" name='username'>
23 </p>
24
25 <p>留言:</p>
26 <p>
27 <textarea name="mess"></textarea>
28 </p>
29 </form>
30 </body>
31 </html>min-width最小宽度
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{ 8 font-family: 微软雅黑;
9 margin:0px;
10 }
11
12 ul{13 width:100%;
14 min-width:1200px;
15 background: #272822;
16 list-style-type:none;
17 padding-left:0px;
18 line-height:40px;
19 height:40px;
20 }
21
22 ul li{23 float:left;
24 margin-left:15px;
25 }
26
27 ul a{28 color:#fff;
29 text-decoration:none;
30 }
31 </style>
32 </head>
33 <body>
34 <ul>
35 <li><a href="">百度</a></li>
36 <li><a href="">新浪</a></li>
37 <li><a href="">网易</a></li>
38 <li><a href="">腾讯</a></li>
39 <li><a href="">淘宝</a></li>
40 <li><a href="">淘宝</a></li>
41 <li><a href="">淘宝</a></li>
42 <li><a href="">淘宝</a></li>
43 <li><a href="">淘宝</a></li>
44 <li><a href="">淘宝</a></li>
45 <li><a href="">淘宝</a></li>
46 <li><a href="">淘宝</a></li>
47 <li><a href="">淘宝</a></li>
48 <li><a href="">淘宝</a></li>
49 <li><a href="">淘宝</a></li>
50 <li><a href="">淘宝</a></li>
51 <li><a href="">淘宝</a></li>
52 <li><a href="">淘宝</a></li>
53 <li><a href="">淘宝</a></li>
54 <li><a href="">淘宝</a></li>
55 <li><a href="">淘宝</a></li>
56 <li><a href="">淘宝</a></li>
57 <li><a href="">淘宝</a></li>
58 <li><a href="">淘宝</a></li>
59 <li><a href="">淘宝</a></li>
60 <div style='clear:both'></div>
61 </ul>
62 </body>
63 </html>css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）相关推荐
- 纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- html鼠标悬停盒子凸起,css3 transform动画鼠标悬停div容器凸起放大显示
特效描述:css3 transform动画 鼠标悬停 div容器 凸起放大显示.鼠标悬停div容器凸起放大显示效果 代码结构 1. HTML代码 what? If you want to sell s ...
- html 鼠标图标做成动画效果,纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 实现的代码. html代码: 复制代码 代码如下: css3代 ...
- css划上去变长,Css3如何实现鼠标移上变长特效？（图文+视频）
本篇文章主要给大家介绍用css3实现鼠标移入变长效果的方法. 在前端页面设计中,css的功能是异常强大的,只要运用好它,你能实现很多网站各种精彩的动态效果.那么在之前的文章中也给大家分享介绍了一些用c ...
- html的悬停图片缓慢放大,css3怎么实现鼠标悬停图片时缓慢变大效果?（图文+视频）...
本篇文章主要给大家介绍当鼠标滑过图片时实现放大效果的具体方法. 当我们在浏览各大电商网站时,最常见的图片动态效果,应该就是鼠标移入图片即悬停在图片时出现放大的效果了.实现这样的动态效果主要是为了突出产 ...
- html5鼠标经过图片透明,html5 css3透明时钟鼠标悬浮图片放大
特效描述:html5 css3 透明时钟 鼠标悬浮 图片放大,html5 css3时钟及鼠标悬浮图片扩大特效,适合于初学者,而且是个不错的展示效果 代码结构 1. 引入CSS 2. HTML代码 va ...
- css3论坛,css3学习参考手册
1.什么是CSS3 CSS(层叠样式表)它是用来控制页面的布局.字体.颜色.背景和其它效果,CSS3是最新版本,控制更加精细,更加高效,实现更复杂的效果. 2.CSS文件的命名方式 style.cs ...
- 【CSS3】CSS3 学习笔记（1w字+）
CSS3 学习笔记 一 l CSS 基础 (一)CSS 介绍 1.CSS 教程 2.CSS 编写规范 (二)CSS 基础语法 二 l CSS 选择器 (一)元素选择器 (二)选择器分组(多个选择器 ...
- 【CSS3】CSS3动画——我离前端的炫酷又近了一步
[CSS3]CSS3动画--我离前端的炫酷又近了一步 博客说明 文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除! ...
最新文章
- gpg加解密软件学习
- go float64 比较_Go 每日一库之 plot
- 在.Net中，如何创建一个后台执行的进程？
- php 获取js对象的属性值,js获取对象,数组所有属性键值(key)和对应值(value)的方法示例...
- 二开精美UI站长论坛网站源码 可切换界面
- Zeusee 开源移动端车型识别系统HyperVID
- Tensorflow实践：用神经网络训练分类器
- 中国程序员的最后归宿
- ChaiNext：市场短期内延续区间震荡
- HTTP 权威指南 第二章 URL 与资源
- 阿里云营收结构和基础设施规模
- 认识计算机系统基本结构,高中信息技术计算机基础应用课件：03认识计算机系统的组成与作用...
- 标准正态分布怎么算_标准正态分布值计算器
- 一个屌丝程序猿的人生（十六）
- 相机快门_向我的智能手机添加远程相机快门的最简单方法是什么？
- xxx.exe 中的 0x005d93af (sss.dll) 处最可能的异常: 0xC0000005: 读取位置 0x00000000 时发生访问冲突
- 教程：MySQL 8安装与配置及注意事项
- 杭州 职称 计算机免试,明年杭州市评职称 年满50周岁以上才免考计算机
- Element 官方宣布了：Element UI for Vue 3.0 来了！
- weex的使用初体验