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. 二维LIS（CDQ分治）

    题目描述 给定一个长度为N的序列S,S的每个元素pi是一个二元组(xi,yi),定义pi<pj当且仅当xi<xj并且yi<yj,求S的最长上升子序列长度 输入格式 第一行一个N,表示 ...

  2. centos7.2 64位安装java

    1.  wget http://download.oracle.com/otn-pub/java/jdk/8u131-b11/d54c1d3a095b4ff2b6607d096fa80163/jdk- ...

  3. Serializable中的serialVersionUID到底有啥用

    最近在研究跨进程通信的问题,于是又再一次研究了,我们熟悉而又陌生的Serializable接口. 那么好,做过Java开发的朋友肯定对这个接口不陌生吧,Java中就是通过这个接口,来实现了序列化和反序 ...

  4. 自己定义progressdialog载入动画，这里还有旋转的载入条，美团，多个图片动画

    自己定义progressdialog载入动画,这里还有旋转的载入条,美团,多个图片动画 下载Demo:http://download.csdn.net/detail/menglele1314/8775 ...

  5. 13. 关于IDEA工具在springboot整合mybatis中出现的Invalid bound statement (not found)问题

    在一切准备就绪之后,测试test,却出现了org.apache.ibatis.binding.BindingException: Invalid bound statement (not found) ...

  6. Java基础学习总结（28）——Java对各种排序算法的实现

    这里总结下各种排序算法的java实现 冒泡排序 public class BubbleSort { publicstaticint[] bubbleSort(int[] array) { if(arr ...

  7. Android 蓝牙扫描代码

    /** * Created by rbq on 2016/11/1. */ import android.bluetooth.BluetoothAdapter; import android.blue ...

  8. ES权威指南1

    Elasticsearch学习笔记 一 本文版权归博客园和作者吴双本人共同所有 转载和爬虫请注明原文地址 www.cnblogs.com/tdws. 本文参考和学习资料 <ES权威指南> ...

  9. linux 查看 *.a *.so 符号表(zt)

    objdump -tT libName.so | grep symbel symbolName nm -D libName.so | grep symbel symbolName 很多非常熟悉wind ...

  10. 可直接复制粘贴的boostrap图标库网址

    1:http://fontawesome.dashgame.com/ 2:http://www.kuiyu.net/art-34.html 3:http://www.bootcss.com/p/fon ...