CSS基本样式_css 比bolder更粗

 行内元素有：<span></span>，<img/>，<a></a>，<input/>，<strong></strong>，<big></big>
 特点：只占内容的宽度,行内元素不能设置高度和宽度
            
 块元素：内容不管有多少，都独占一行，可以设置高度和宽度
 <h1>-<h6>    <div></div>    <p></p>   <hr />   <table></table>   <ul></ul>   <ol></ol>

字体样式：字体属性的顺序：字体风格→字体粗细→字体大小→字体类型

            font-family：设置字体类型
            font-size：设置字体大小

            字体风格属性：font-style常用属性值：
            1.普通字体：normal 默认
            2.斜体样式：italic
            3.倾斜体样式：oblique

            字体加粗属性为：font-weight 常用取值：
            1.normal：默认值，定义标准的字体。
            2.bold：粗体字体
            3.bolder：更粗的字体。
            4.lighter：更细的字体。
            5.100、200、300、400、500、600、700、800、900：定义由细到粗的字体。
            400等同于normal，700等同于bold。

文本样式：

        1.text-align:设置文本水平对齐方式，常用值：
        left  right  center
        2.line-height:设置文本行高属性
        3.text-indent：设置文本首行缩进
        4.text-decoration:设置文本装饰
        常用属性：none 默认值：标准 （常用在超链接设置，超链接默认属性是text-decoration：underline）
                 underline：设置文本下划线
                 overline:设置文本上划线
                 line-through：设置文本删除线

链接样式：

    <style>
     	/**
     	 * 顺序：爱恨原则  LoVe HAte
     	 * 注意：不要给一个超链接过多加伪类
     	 * /
     	/*未访问前样式*/
     	a:link{
     		color: black;
     		text-decoration: none;
     	}
     	/*已经访问的超链接样式*/
     	a:visited{
     		color: blue;
     	}
     	/*鼠标移动到链接的样式*/
     	a:hover{
     		color: red;
     	}
     	/*点击未释放*/
     	a:active{
     		color: blueviolet;
     	}
     </style>

背景样式：

	<style>
		h1{
			background-color: red;
		}
		p{
			background-color: blue;
		}
		div{
			width: 800px;
			height: 800px;
			/*background-image: url(../image/1.jpg);
			background-repeat: no-repeat;*/
			background: url(../image/1.jpg) no-repeat;/*可以进行简写，顺序无所谓*/
		}
	</style>

 

列表样式：

            list-style-type：列表样式
            常用值：none 无标记符号
                            disc 实心圆，默认类型
                            circle:空心圆
                            square:实心正方形
                            decimal：数字
            2.list-style-image: url(图标地址)
            list-style-image: url(img/arrow-icon.gif);

边框：

		<style>
			/*顺序：边框宽度>边框样式>边框颜色*/
			.textborder{
				/*border-width: 2px;
				border-color: red;
				border-style: solid;*/
				border: 2px solid red;
			}
		</style>

 

表格样式：

    <style>
    	table,th,td{
    		border-collapse: collapse;
    	}
    	table{
    		width: 600px;
    		text-align: center;
    	}
    </style>

 

CSS样式优先级和继承：

行内样式>内部样式表>外部样式表

ID选择符>类选择符>类型选择符>通配符

子元素可以继承父元素的样式风格

子元素的样式不会影响父元素的样式风格

小结：

 

使用<style>元素引入CSS样式。

CSS选择符分为类型选择符、类选择符、ID选择符、通配选择符、包含选择符、选择符分组

在HTML中引入CSS样式的三种方式分别是行内样式、内部样式表和外部样式表

外部样式表使用<link/>元素链接外部CSS文件，CSS样式的优先级依据就近原则。

              CSS中加入注释的方式与HTML中加入注释的方式不同，注释以“/*”符号开始，以“*/”符号结束。

字体样式图：

 

文本样式图：

 

text-align属性图：

 

text-decoration属性图：

 

使用CSS设置超链接：

 

 

CSS设置鼠标形状：

 

background-repeat属性图：

 

列表属性图：

 

无序列表标记类型图：

 

有序列表标记图：

 

边框 border-color 属性图：

 

表格属性图：

 

总结：

使用CSS设置字体的大小、类型、风格、粗细。

使用CSS设置文本颜色、行距、首行缩进、对齐方式、文本装饰等。

使用CSS设置超链接在不同状态下的样式。

使用CSS设置页面背景颜色、背景图片，为列表设置列表自定义图标。

使用CSS设置列表项的类型、列表图像及列表符号显示位置。