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. 2.技巧: 用 JAXM 发送和接收 SOAP 消息—Java API 使许多手工生成和发送消息方面必需的步骤自动化

    转自:https://www.cnblogs.com/chenying99/archive/2013/05/23/3094128.html 技巧: 用 JAXM 发送和接收 SOAP 消息—Java ...

  2. 72.挖掘CSDN密码到链表并统计密码出现次数生成密码库

    list.h #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> #include & ...

  3. mycat基本概念及读写分离一

    mycat基本概念及读写分离一 目录(?)[+] 安装与启动 mycat目录介绍 mycat三个最重要配置文件 验证读写分离 安装与启动 linux下可以下载Mycat-server-xxxxx.li ...

  4. C++静态库编译

    MFC 选项选择: 静态库编译 增加头文件:( opencv相关的) #pragma once #ifdef WIN32 #include <opencv2/core/version.hpp&g ...

  5. 116.C语言异常抛错

    #include <stdlib.h> #include <stdio.h> #include <setjmp.h> //异常抛错检测 jmp_buf buf1; ...

  6. BZOJ——3343: 教主的魔法 || 洛谷—— P2801 教主的魔法

    http://www.lydsy.com/JudgeOnline/problem.php?id=3343  ||  https://www.luogu.org/problem/show?pid=280 ...

  7. js进阶 13-4 jquery自定义动画animate()如何使用

    js进阶 13-4 jquery自定义动画animate()如何使用 一.总结 一句话总结:animate(params,[speed],[easing],[fn]),参数:params:一组包含作为 ...

  8. iOS_06_基本运算符

    一.算术运算 c语言一共有34种运算符,包括了常见的加减乘除 1.加法运算+ # 除了能做加法运算,还能表示正号:+5.+90 2.减法运算- # 除了能做减法运算,还能表示符号:-10.-200 3 ...

  9. 使用Surging Mqtt 开发基于WS的MqttClient客户端

    原文:使用Surging Mqtt 开发基于WS的MqttClient客户端 最近一段时间由于要做一套智能设备系统,而有幸了解到Surging中的Mqtt broker,学习了很多东西本篇文章基于Su ...

  10. 5、regulator系统的概念及测试

    概念:Regulator : 电源芯片, 比如电压转换芯片Consumer : 消费者,使用电源的部件, Regulator是给Consumer供电的machine : 单板,上面焊接有Regulat ...