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鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）的更多相关文章

  1. 11种常用css样式之鼠标、列表和尺寸样式学习

    鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...

  2. 30款css3实现的鼠标经过图片显示描述特效

    今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...

  3. 基于CSS3制作的鼠标悬停动画菜单

    之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...

  4. 一款纯css3实现的鼠标经过按钮特效

    今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div align=&qu ...

  5. 纯css3实现的鼠标悬停动画按钮

    今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  6. CSS3：CSS3 背景

    ylbtech-CSS3:CSS3 背景 1.返回顶部 1. CSS3 背景 CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制. 在本章您将了解以下背景属性: background ...

  7. CSS3：CSS3 圆角

    ylbtech-CSS3:CSS3 圆角 1.返回顶部 1. CSS3 圆角 CSS3 圆角 使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". C ...

  8. CSS3：CSS3 边框

    ylbtech-CSS3:CSS3 边框 1.返回顶部 1. CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. ...

  9. CSS3：CSS3 简介

    ylbtech-CSS3:CSS3 简介 1.返回顶部 1. CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2. CSS3 模块 CSS3被拆分为&quo ...

随机推荐

  1. 关于bcg库记忆界面的问题及其解决办法

    作者:朱金灿 来源:http://blog.csdn.net/clever101 今天同事向我请教一个问题,说他使用BCG创建了一个停靠栏,之后把代码注释了,但是程序启动时总出现一个Debug Ass ...

  2. js全选反选按钮实现

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. pycharm 配置autopep8（亲测可行）

    autopep8是一个可以将Python代码自动排版为PEP8风格第三方包,使用它可以轻松地排版出格式优美整齐的代码.网络上有很多介绍如何在pycharm中配置autopep8的方案,但很多方案中还是 ...

  4. 重排序列 & 拓扑排序

    http://bookshadow.com/weblog/2016/10/30/leetcode-sequence-reconstruction/ 这道题目,检查重排的序列是否一致. 用了拓扑排序. ...

  5. Zorka和zico实现不同主机之间的交互

    之前参考下面的两篇博文进行了zorka以及其collector端zico的配置. http://quyuxjtu.sinaapp.com/?p=532 http://quyuxjtu.sinaapp. ...

  6. Tomcat redis 配置

    http://www.cnblogs.com/interdrp/p/4868740.html http://blog.csdn.net/qq584852076/article/details/4650 ...

  7. nyoj999 师傅又被妖怪抓走了 (预处理+bfs+状态压缩)

    题目999 题目信息 执行结果 本题排行 讨论区 师傅又被妖怪抓走了 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 话说唐僧复得了孙行者,师徒们一心同体,共诣西方.自宝 ...

  8. 如何把别人的原理图和pcb图建立一个完整的工程

    这里是我从网友那里下载的pcb图和原理图 我们怎么通过这两个文件建立一个完整的工程 我们选中pcb图文件,通过下面的操作,就可以导出pcb封装库: 同样的方法,我选中pcb图,然后用下面图的方法,就可 ...

  9. 【Codeforces Round #433 (Div. 2) A】Fraction

    [链接]h在这里写链接 [题意] 在这里写题意 [题解] 枚举分子从高到低就好. 这样得到的一定是最大的. (可以约分没错,但是约分过后和就不是n了,所以不会有错的) [错的次数] 0 [反思] 在这 ...

  10. 第一个hello word 驱动载入失败--------

    今天尝试自己载入第一个驱动模块,依据惯例hello word 然后失败了,如今说明我的操作过程.请个位看看. 首先我的内核版本号: 模块代码与MAKEFILE #include<linux/in ...