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. Day6上午解题

    预计分数:100+100+30=230 实际分数:90+25+10=125 T1少判了一种情况,T2的贪心是错的,T3被卡了... T1 模拟水题,注意20的可以用3个5块的找 #include< ...

  2. BZOJ2243: [SDOI2011]染色（树链剖分/LCT）

    Description 给定一棵有n个节点的无根树和m个操作,操作有2类: 1.将节点a到节点b路径上所有点都染成颜色c: 2.询问节点a到节点b路径上的颜色段数量(连续相同颜色被认为是同一段), 如 ...

  3. 代码生成器实现的Entity,Dao,Service,Controller，JSP神器（含代码附件）

    package com.flong.codegenerator; import java.sql.Connection; import java.sql.DatabaseMetaData; impor ...

  4. Log4j中为什么设计isDebugEnabled()方法

    转自:https://www.jianshu.com/p/e1eb7ebfb21e 先看下面的代码,在真正执行logger.debug()之前,进行了logger.isDebugEnabled()的判 ...

  5. JS 保留2位小数 四舍五入（小数点后面不足2位，自动用0补齐）

    function changeTwoDecimal_f(x) { var f_x = parseFloat(x); if (isNaN(f_x)) { alert('function:changeTw ...

  6. 【河南省多校脸萌第六场 A】巴什博弈？

    [链接]http://acm.nyist.me/JudgeOnline/problem.php?cid=1013&pid=5 [题意] 在这里写题意 [题解] 0..a-1 YES a..a+ ...

  7. [Angular] Progress HTTP Events with 'HttpRequest'

    New use case that is supported by the HTTP client is Progress events. To receive these events, we cr ...

  8. 通达OA二次开发 对通达2015版微信查询用户信息模块升级开发（图文）

    OA提供对微信的支持这一点做的很好,用户使用起来也更方便了. 而当中的个别功能还有待完好,比现在天要说的这个微信查询用户信息模块. 升级前的用法:输入@+用户中文名.而且要求全然匹配,然而在实际使用中 ...

  9. js进阶 14-2 如何用ajax验证登陆状态（这里用load方法）

    js进阶 14-2 如何用ajax验证登陆状态(这里用load方法) 一.总结 一句话总结:$('#test').load('test.php?password=1234560'),这样就get方式提 ...

  10. Nginx TCP代理

    nginx 在1.9.0 版本发布以前如果要想做到基于TCP的代理及负载均衡需要通过打名为nginx_tcp_proxy_module的第三方patch来实现,该模块的代码托管在github上 网址: ...