css3-5 css3鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）
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鼠标、列表和尺寸样式怎么用（文字有关的样式会被继承）的更多相关文章
- 11种常用css样式之鼠标、列表和尺寸样式学习
鼠标cursor常见样式crosshair;/*十字形状*/cursor:pointer;/*小手形状*/cursor:wait;/*等待形状*/cursor:text;/*默认 文本形状*/curs ...
- 30款css3实现的鼠标经过图片显示描述特效
今天给大家分享30款css3实现的鼠标经过图片显示描述特效,鼠标经过这些图片的时候以非常炫的方式显示图片的描述.为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现 ...
- 基于CSS3制作的鼠标悬停动画菜单
之前分享了好多款css3实现的鼠标悬停效果.今天再给大家带来一款基于CSS3制作的鼠标悬停动画菜单.这款菜单适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界 ...
- 一款纯css3实现的鼠标经过按钮特效
今天再给大家带来一款纯css3实现的鼠标经过按钮特效.这款按钮非常简单,但效果很好,非常漂亮.一起看下效果图: 在线预览 源码下载 实现的代码. html代码: <div align=&qu ...
- 纯css3实现的鼠标悬停动画按钮
今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- CSS3：CSS3 背景
ylbtech-CSS3:CSS3 背景 1.返回顶部 1. CSS3 背景 CSS3 背景 CSS3中包含几个新的背景属性,提供更大背景元素控制. 在本章您将了解以下背景属性: background ...
- CSS3：CSS3 圆角
ylbtech-CSS3:CSS3 圆角 1.返回顶部 1. CSS3 圆角 CSS3 圆角 使用 CSS3 border-radius 属性,你可以给任何元素制作 "圆角". C ...
- CSS3：CSS3 边框
ylbtech-CSS3:CSS3 边框 1.返回顶部 1. CSS3 边框 CSS3 边框 用 CSS3,你可以创建圆角边框,添加阴影框,并作为边界的形象而不使用设计程序,如 Photoshop. ...
- CSS3：CSS3 简介
ylbtech-CSS3:CSS3 简介 1.返回顶部 1. CSS3 简介 对CSS3已完全向后兼容,所以你就不必改变现有的设计.浏览器将永远支持CSS2. CSS3 模块 CSS3被拆分为&quo ...
随机推荐
- MySQL乱码问题以及utf8mb4字符集---utf8mb4和utf8有什么区别？ emoji表情与utf8mb4
utf8mb4兼容utf8,且比utf8能表示更多的字符. 关于emoji表情的话mysql的utf8是不支持,需要修改设置为utf8mb4,才能支持, 因为utf8mb4是utf8的超集
- flex布局：
他的布局主要有两个“二”,一个二:容器项,子项目项.另一个:有两条轴,主轴,副轴.它的使用时,必须先声明说明是flex布局:display:flex; 针对于容器项的属性6个: 1.flex-dire ...
- Dialog和FormView如何派生通用类
派生通用类涉及到派生类的构造函数需要传递窗口ID和CWnd,所以要在派生类中事先定义好 在Dialog中构造函数是这样定义的 public: CDialogEx(); CDialogEx(UINT n ...
- oracle 归档模式和非归档模式
http://www.cnblogs.com/gaojian/p/3611641.html http://blog.csdn.net/yong5241200/article/details/39451 ...
- Node.js笔记（九）Nodejs与shell
众所周知.Nodejs是单进程异步执行的.但不光是单进程,Nodejs也提供了多进程方面的支持 其创始人应该还是比較重视这一块的,最有力的证据就是child_process是Nodejs核心模块之中的 ...
- Fragment 实现的 分类 效果
Fragment 实现的 分类 效果 布局文件的信息: <LinearLayout xmlns:android="http://schemas.android.com/apk/re ...
- Spring RootBeanDefinition，ChildBeanDefinition，GenericBeanDefinition
转自:https://blog.csdn.net/joenqc/article/details/68942972 RootBeanDefinition,ChildBeanDefinition,Gene ...
- 15.lambda表达式
#include <iostream> #include <array> using namespace std; //解决函数怀孕现象 //[](){} //[] =引用,只 ...
- Scala具体解释---------数组、元组、映射
一.数组 1.定长数组 声明数组的两种形式: 声明指定长度的数组 val 数组名= new Array[类型](数组长度) 提供数组初始值的数组,无需newkeyword Scala声明数组时.须要带 ...
- asp.net--TextBox属性全研究
. .aspx代码例如以下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="T ...