Common style attributes and values css3 notes in series -2.css

Common style attributes and values ​​in css3 series -2.css

Fundamentals continue on an article continue to understand css, and pay attention to my micro-channel public number: full stack study notes

css common style attributes and values

1. Font and color
2. Background Properties
3. Text property
4. Border Properties
5. Inside and outside margins
6. Mouse cursor property
7. List styles
8. Positioning properties
9. Clear float and float
10. scroll bar
11. Style show and hide

Font and color

font-family:微软雅黑;/*字体名称（类型）：微软雅黑，黑体，楷体，宋体*/

font-size: 20px;/*字体大小*/

font-weight: 600;/*字体加粗*/

font-style: italic;/*字体样式*/

Background Properties

background: #00FF00 url(bgimage.gif) no-repeat fixed top;/*这是融合在一起的写法*/


background-color: red;/*背景颜色*/

background-image:url('图片路径');/*背景图片*/

background-repeat:no-repeat;/*背景图片是否允许重复no-repeat repeat*/

background-attachment:fixed;/*规定背景图像是否固定或者随着页面的其余部分滚动*/

background-origin:content-box;/*规定背景图片的定位区域。*/

/*background-position:50% 50%;*/

/*background-position:800px 300px;*/

background-position:right center;/*规定背景图像的位置*/

background: inherit;/*规定应该从父元素继承 background 属性的设置。*/

Text font properties

.text{
	color:rebeccapurple;/*字体颜色*/

	direction: ltr;/*字体方向从右向左*/
	/*rtl 从左向右*/

	line-height: 5px;/*设置行高*/

	letter-spacing:2px;/*设置字符间的间距，注意是字符，或者是字母*/

	text-align:center;/*设置文本的对齐方式*/

	text-decoration:overline;/*字体的修饰，如下划线underline，上划线overline，
	删除线line-through，也可以设置为none，无修饰*/

	text-indent:2em;/*首行缩进2个字，还有其他px的单位，%也可以*/

	text-shadow: rosybrown;/*文本阴影*/

	text-transform: lowercase;/*属性控制文本的大小写 */
	/*capitalize 文本中的每个单词以大写字母开头。*/
	/*uppercase	定义仅有大写字母。*/
	/*inherit	规定应该从父元素继承 text-transform 属性的值。*/

	white-space: nowrap;/*属性设置如何处理元素内的空白 */
	/*nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/
	/*pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。*/
	/*pre-wrap	保留空白符序列，但是正常地进行换行。*/

	word-spacing:2px;/*属性增加或减少单词间的空白,注意这是单词*/
}

If you've seen here, that you should be able to continue to look at the following code word is not easy, a point of attention to it. My micro-channel public number: full stack study notes

Border Properties

Border Properties more important

.border{
	border: 2px solid red;/*设置边框样式  宽度为2px 可见 红色 也可以分开写*/

	border-width: 2px;
	border-color: red;
	border-style: solid;/*分开写的border属性*/
	/*也可以这样设置*/
	border-style:dotted solid double dashed;
	/*上边框是点状  右边框是实线  下边框是双线  左边框是虚线*/ 
	/*
	none	无边框。
	hidden	与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
	dotted	点状边框。
	dashed	虚线。。
	solid	实线。
	double	双线。
	inherit	规定应该从父元素继承边框样式。
	*/

	border-radius: 5px;/*设置边框弧的大小，值越大，弧度越大*/

	/*也可以对border的某一个边进行设置属性*/
	border-top: 2px solid red;

}

Here you see mood may be so

, but do not worry if you find it hard to understand, you can whisper to me, I tell you know!

Inside and outside margins

Padding

/*内边距*/
.padding{
	padding: 2px;/*盒子模型的外边距，上左下右 各向内缩进2px*/
	
	
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 2px;

	/*以上四句等于下面一句  上右下左的顺序 值是不一定相等的*/
	padding: 2px 2px 2px 2px;

}

Margin

/*外边距*/
.margin{
	margin: 2px;/*盒子模型的外边距，和padding的区别就是，margin是向外扩展的，padding是向内扩展的*/
	
	margin-top: 2px;
	margin-right: 3px;
	margin-bottom: 4px;
	margin-left: 6px;
	/*上面四句和下面一句也是等效的*/
	margin:2px 3px 4px 6px;
}

If you are a novice, then probably to the box model, padding margins are not familiar with this part when school is relatively difficult! If you have questions or leave comments may whisper to me, I can help you solve Oh!

Mouse cursor property

This section with a relatively small, a little understanding on the line

/*鼠标样式属性*/
.cursor{
	cursor: pointer;/*光标呈现为指示链接的指针（一只手）*/
	/*help	此光标指示可用的帮助（通常是一个问号或一个气球）
	  text	此光标指示文本。
	  wait	此光标指示程序正忙（通常是一只表或沙漏
	  default	默认光标（通常是一个箭头）
	  auto	默认。浏览器设置的光标。
	*/
}

List styles

/*列表属性*/
.list{
	list-style: circle;
	list-style:square inside url('/test/1.png');
	list-style-type: disc;/*设置列表项标记的类型*/
	/*disc	默认。标记是实心圆。
	circle	标记是空心圆。
	square	标记是实心方块。
	decimal	标记是数字。*/
	list-style-image: url();/*属性使用图像来替换列表项的标记*/
	list-style-position: inside;/*属性设置在何处放置列表项标记*/
}

Positioning properties

Generally positioning properties with more than, I hope you can read the following code

Relative positioning

.position{
	position: relative;
	left: 2px;
	top: 2px;
}

Code means relative positioning and relative positioning that is, my own position relative to the element, the element is moved again. So the code above means that this element relative to the original location, and then move 2px to the right, move down 2px, pay attention to this point, the code written left, top are positive, that is, moving in the opposite direction . Rather than moving to the left 2px, moves upward 2px.

Absolute positioning

.positionA{
	position: absolute;
	left: 20px;
	right: 20px;
}

The above is absolute positioning, absolute positioning is relative to the entire page is, regardless of the position of the element itself is located. On behalf of the upper left corner of the page (0,0) coordinate, absolute positioning starting position is here. So the above code is achieved from the left 20px, from the top 20px, this understanding may be more than I said above, in the opposite direction is much simpler now.

Clear float and float

css float inside or with a lot of use, must learn Oh! I will not concern the public, then I will teach you, oh! No public: study notes full stack
code word is too difficult! Give attention to it!

To be honest, this piece of floating and talking very troublesome, just to tell us, specifically about the box model behind a say when it floating above, or talking can be a little abstract, you feel it difficult to understand! I try to talk about the next phase of detail.
Illustrations, ha ha, this issue is basically the code text description. As a store of knowledge. To see below!

float

/*浮动*/
.float{
	float: right;
}

What this means is that the block (called a temporary block bar) float to the right, or moving. Floating a lot of things involved, it can sometimes floating, sometimes with floating too much trouble!

Clear float

1. The first way

/*清除浮动*/
.float{
	float: right;
	clear: both;
}

2. The second way

The parent container using overflow: auto.

3. The third way

Pseudo-class parent container after use and zoom.

Pseudo-class selectors have not talked about, for the past two days to write a detailed article selector.

scroll bar

Set the slider

/*滚动条*/
.overflow{
	
	overflow:scroll;/*属性规定当内容溢出元素框时发生的事情。*/
	
	  /*
	  	visible	默认值。内容不会被修剪，内容溢出容器。
		hidden	内容会被修剪，并且其余内容是不可见的,不会出现滚动条。
		scroll	内容会被修剪，但是浏览器会显示滚动条。
		auto	如果内容被修剪，则浏览器会显示滚动条。
		inherit	规定应该从父元素继承 overflow 属性的值。
	  */
	overflow-y: hidden;/*设置竖直的滚动条*/
	overflow-x: scroll;/*设置横向的滚动条*/
}

Style show and hide

Styles Hide placeholder into hiding and non-hiding placeholder

Non-occupying Hide

.display-z{
	/*隐藏*/
	display: none;
	/*以块级元素显示，宽高不可忽略*/
	display: block;
	/*此元素会被显示为内联元素，元素前后没有换行符*/
	display: inline; 

}

That so-called non-occupying hidden, the use of this property, this element is not rendered, it will not be seen.

Hide placeholder

/*占位隐藏*/
.visibility{
	/*隐藏*/
	visibility: hidden;
	/*显示*/
	visibility: visible;
}

The placeholder hidden meaning, though we do not see this element, but in fact he has been rendered out, just hidden, like science fiction, like the inside of stealth.

Well, this issue of tutorials on here! There are some very important practical things did not specifically say so on the basis of css tutorial update is complete, there will be some practical tutorial! I hope you will support Oh!