日度归档:2020年2月1日

CSS如何为标签textarea文本框添加背景图片或背景色呢?


摘要:
下文讲述使用css代码中为textarea标签设置背景样式的方法分享,如下所示:


实现思路:
使用css中background相关属性设置其背景信息

例:

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
.textarea1
{
   background:blue url(http://www.maomao365.com/wp-content/uploads/2020/01/css_bg.png) no-repeat right bottom; 
   border:1px solid gray;
}
</style>
</head>
<body>

<textarea rows="6" cols="10"  class="textarea1"></textarea>

</body>
</html>

CSS white-space属性功能简介说明


摘要:
下文讲述css中white-space属性的功能简介说明,如下所示:


css white-space功能说明

white-space功能:指定元素中的空白处理方式
—————————————-
white-space属性值说明:

属性值

备注说明
normal

缺省值 空白会被浏览器忽略
pre

空白会被浏览器保留,其功能同<pre>标签相同
nowrap

文本不会换行,当遇到<br> 标签则此属性失效
pre-wrap

保留空白符序列,正常地进行换行
pre-line

合并空白符序列,保留换行符
inherit

从父级继承 white-space 属性的值


css white-space举例说明

<html>
<head>
<meta charset="utf-8"> 
<title>猫猫教程(www.maomao365.com)</title> 
<style>
p
{
	white-space:nowrap;
}
</style>
</head>
<body>

<p>
段落中的内容不重复,段落中的内容不重复,段落中的内容不重复,
段落中的内容不重复,段落中的内容不重复,段落中的内容不重复,
段落中的内容不重复,段落中的内容不重复,段落中的内容不重复,
段落中的内容不重复,段落中的内容不重复,段落中的内容不重复,
段落中的内容不重复,段落中的内容不重复,段落中的内容不重复
</p>

</body>
</html>
css white-space  属性举例说明

css white-space
属性举例说明

CSS3 @media关键字功能说明


摘要:
下文讲述@media关键字的功能说明,如下所示:


@media功能及应用场景

@media功能:
针对不同的媒体类型编写css样式信息,使@media只在指定的模式下起作用
例:

  @media screen and (max-width:500px) {
    body {
        background-color:red;
    }
 }
  /*当屏幕中最大尺寸为500px时,背景色为红色*/
 

@media的两种语法:
1.css 编写中@media语法应用

   
   @media mediatype and|not|only (media feature) {
      /*css 代码*/
    }
   

2.针对不同的媒体,调用stylesheets
你也可以针对不同的媒体使用不同 stylesheets文件

  <link rel="stylesheet" media="mediatype and|not|only (media feature)" href="sheetFilePath.css">

—————–参数说明—————–
mediatype参数值说明:

参数值

备注说明
all

缺省值-指此css适用于所有设备
print

适用于打印机和打印预览时使用的css
screen

适用于电脑屏幕,平板电脑,智能手机
speech

适用于屏幕阅读器等发声设备

—————————————–
media feature参数值说明:

属性值

备注说明
aspect-ratio

定义输出设备中的页面可见区域宽度与高度的比率
color

定义输出设备每一组彩色原件的个数。如果不是彩色设备,则值等于0
color-index

定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表,则值等于0
device-aspect-ratio

定义输出设备的屏幕可见宽度与高度的比率
device-height

定义输出设备的屏幕可见高度
device-width

定义输出设备的屏幕可见宽度
grid

用来查询输出设备是否使用栅格或点阵
height

定义输出设备中的页面可见区域高度
max-aspect-ratio

定义输出设备的屏幕可见宽度与高度的最大比率
max-color

定义输出设备每一组彩色原件的最大个数
max-color-index

定义在输出设备的彩色查询表中的最大条目数
max-device-aspect-ratio

定义输出设备的屏幕可见宽度与高度的最大比率
max-device-height

定义输出设备的屏幕可见的最大高度
max-device-width

定义输出设备的屏幕最大可见宽度
max-height

定义输出设备中的页面最大可见区域高度
max-monochrome

定义在一个单色框架缓冲区中每像素包含的最大单色原件个数
max-resolution

定义设备的最大分辨率
max-width

定义输出设备中的页面最大可见区域宽度
min-aspect-ratio

定义输出设备中的页面可见区域宽度与高度的最小比率
min-color

定义输出设备每一组彩色原件的最小个数
min-color-index

定义在输出设备的彩色查询表中的最小条目数
min-device-aspect-ratio

定义输出设备的屏幕可见宽度与高度的最小比率
min-device-width

定义输出设备的屏幕最小可见宽度
min-device-height

定义输出设备的屏幕的最小可见高度
min-height

定义输出设备中的页面最小可见区域高度
min-monochrome

定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution

定义设备的最小分辨率
min-width

定义输出设备中的页面最小可见区域宽度
monochrome

定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备,则值等于0
orientation

定义输出设备中的页面可见区域高度是否大于或等于宽度
resolution

定义设备的分辨率。如:96dpi, 300dpi, 118dpcm
scan

定义电视类设备的扫描工序
width

定义输出设备中的页面可见区域宽度

@media应用场景:
常用于响应式布局,当你变化浏览器的大小时,页面会根据浏览器的高度和宽度重绘页面。

@media举例说明

  <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <title>猫猫教程(www.maomao365.com)</title>
 </head>
 <body>
 <style>
   body{
     margin:0;
	 padding:0;
	 text-align:center;
   }

   .header{
      padding-top:20px;
	  border:0.01em solid gray;
	  padding-bottom:10px;
	  width:100%;
   }
  
   .menu{
      float:left;
      width:30%;
      background-color:blue;
	  color:white;
   }

      .content{
	        float:left;
      width:70%;
      background-color:red;
	  color:white;
    }

   .footer{
      padding-top:20px;
	  border:0.01em solid gray;
	  padding-bottom:10px;
	  width:100%;
   }

   @media only screen and (max-width:500px) {
      /*当最大宽度为500px*/
 .menu{
      float:left;
      width:100%;
      background-color:blue;
	  color:white;
   }

      .content{
	        float:left;
      width:100%;
      background-color:red;
	  color:white;
    }

   }

 </style>
  
   <div class="header"> 
    顶部
   </div>
	
	<div class="main">
        <div class="menu">
			 菜单
        </div>

        <div class="content">
			 内容
        </div>
        

	</div>

    <div class="footer"> 
     底部
   </div>
	

 </body>
</html>
css media 响应式布局css编写方法

css media 响应式布局css编写方法