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. Linux启动过程总结

    当我们按开机键后,主机就会执行: 1.POST(Power-On Self Test 加电自检). 2.读取BIOS中定义的开机设备启动程序,并加载MBR(主引导记录(Master Boot Reco ...

  2. vector转数组

    vector转数组 由于vector内部的数据是存放在连续的存储空间,vector转数组事实上只需要获取vector中第一个数据的地址和数据的长度即可.如果仅仅是传参,无需任何操作,直接传地址即可,如 ...

  3. MyBatis学习总结（12）——Mybatis+Mysql分页查询

    package cn.tsjinrong.fastfile.util; /**  * @ClassName: Page  * @Description: TODO(分页组件的父类,用来封装分页的 通用 ...

  4. Android中的帧动画与补间动画的使用

    前言 在日常开发中,我们有时候须要一些好看的动画效果,这时能够充分利用Android提供的这几种动画来实现. Android提供了3种类型的动画: 补间动画:补间动画能够应用于View,让你能够定义一 ...

  5. time and datetime

    一.简述 我们在写代码的过程经常遇到时间模块,如果我们以后需要根据时间去筛选信息的话,那用户会更大,所以今天就来讲讲时间的两大模块:time & datetime 二.time模块 1.tim ...

  6. Docker---(2)为什么要用Docker

    原文:Docker---(2)为什么要用Docker 版权声明:欢迎转载,请标明出处,如有问题,欢迎指正!谢谢!微信:w1186355422 https://blog.csdn.net/weixin_ ...

  7. C#中对XML的操作

    现在有一个xml文件,名称:BookStore.xml,数据如下: <?xml version="1.0" encoding="gb2312"?>& ...

  8. Mycat 读写分离+分库分表

    上次进过GTID复制的学习记录,已经搭建好了主从复制的服务器,现在利用现有的主从复制环境,加上正在研究的Mycat,实现了主流分布式数据库的测试 Mycat就不用多介绍了,可以实现很多分布式数据库的功 ...

  9. NHibernate之旅(3)：探索查询之NHibernate查询语言(HQL)

    本节内容 NHibernate中的查询方法 NHibernate查询语言(HQL) 1.from子句 2.select子句 3.where子句 4.order by子句 5.group by子句 实例 ...

  10. C++的模板template

    模板是C++支持参数化多态的工具,使用模板可以使用户为类或者函数声明一种一般模式,使得类中的某些数据成员或者成员函数的参数.返回值取得任意类型. 模板是一种对类型进行参数化的工具: 因此,使用模板的目 ...