CSS基本样式
- 内联样式：直接在页面文件中使用HTML标记的style属性。例如：
<p style="font-family:宋体;color: red;font-size: 10pt;">程序员</p>
- 在页面文件中定义样式：这种方式是通过<style>标记来定义样式，语法格式如下：
<style type="text/css"> h1 {font-family: "微软雅黑";font-size: 12px;} #fromid {font-family: "微软雅黑";font-size: 12px;} .classid{font-family: "微软雅黑";font-size: 12px;} </style>
- 在页面文件中嵌入外部样式表：语法如下
<style type="text/css">
@import url("外部CSS样式文件名");
<!--
外部文件名是以.css为扩展名的CSS文件，如果该文件和当前页面同一个目录下，则直接用文件名，不在同一个目录下，则要给出其相对路径。
->
</style>
- 链接外部样式表:语法如下
<link type="text/css" rel="stylesheet" type="text/css" href="css/index.css"/>
CSS注解语法：CSS注解语句是位于
/* */
CSS选择器
- HTML标记 语法如下
h1 {font-family: "微软雅黑";font-size: 12px;} /*在HTML文档中，所有该标记保护的文本都具有定义的CSS样式*/
- CLASS选择符 语法如下
.classid{font-family: "微软雅黑";font-size: 12px;}/* 在HTML文档中， 所有使用该类名标记的都具有定义的标签*/
- ID选择符 语法如下
#fromid {font-family: "微软雅黑";font-size: 12px;}/* 在HTML文档中，所有指定为该ID的标记都具有定义的标签*/
CSS样式优先级
- 直接在页面上使用HTML标记的Style属性设定的样式优先级最高。
- 其他样式定义按照在页面上出现的先后顺序，越后面的优先度最高。
- ID选择符的优先度高于CLASS选择符。
- 没有被定义样式控制的内容将使用浏览器的默认样式。
CSS基本属性：主要包括背景属性，文本属性，字体属性，边界属性，边框属性，边距属性，列表属性，定位属性
- 背景属性 ：CSS中有关背景的属性，对背景颜色的设置属性和对背景图片的设置属性
img{ background-color: red transparent; /* * 用于设置背景颜色 * 其中transparent表示透明 * 颜色的表示方式有多种 * 1.使用英文名称，如red,blue等。 * 2.用6位十六进制数（#rrggbb）表示。 * 3.用3位十六进制数（#rgb）表示。 * 4.用rgb(r,g,b)函数表示，其中3个参数的取值可为0~255的整数或百分比值， * 如rgb(0,0,0)表示黑色，rgb(100%,100%,100%)表示白色。 */ background-image: url("背景图片的路径")|none; /* * 用于设置要加载的背景图片 */ background-repeat: no-repeat; /* * 用于设置背景图片的排列方式，其属性设置格式如下： * background-repeat:repeat|repeat-x|repeat-y|no-repeat ; * 其中repeat表示以并列方式排列图片，是该属性的默认值，repeat-x表示以x轴方向并列排列图片； * repeat-y表示以y轴方向并列排列图片，no-repeat表示不以并列方式排列图片。 */ background-attachment: scroll; /* * 用于设置移动滚动条时背景图片位置是否固定，其属性设置格式如下： * background-attachment: scroll|fixed; * scroll表示移动滚动条时背景图片随之滚动，fixed表示移动滚动条时背景图片不动。 */ background-position: x,y; /* * 用于设置背景图片的插入位置，其属性设置格式如下： * 1.百分比，用于描述图片距区域元素边框的百分比值 * 2.数值，用具体数值描述，单位可分为任意的长度单位：em px in pt pc cm mm等。 * 3关键字，包括left right center top bottom */ }
- 文本样式 主要用于设置文本的属性
h1{ text-indent: 20px; /* * 用于设置文本的首行缩进值，默认属性值为0，其属性数值用具体数值描述，单位可为任意长度单位：em px in pt pc cm mm等。 */ text-align: left; /* * 用于设置文本段落的水平对齐方式，其属性设置语法如下； * text-align:left|right|center|justify * 该属性的取值有4种： * left表示左对齐 * right表示右对齐 * center表示居中对齐 * justify表示左右对齐 */ vertical-align: baseline; /* * 用于设置文本段落的垂直对齐方式，其属性设置语法如下： * vertical-align: baseline|sub|super|top|text-top|middle|bottom|text-bottom; * baseline:属性的默认值，表示段落文本与上段落文本的基线对齐； * sub：表示文本以下标方式显示； * super:表示以上标方式显示； * top:表示垂直向上对齐； * text-top:表示文本垂直向上对齐； * middle：表示垂直居中对齐； * bottom：表示垂直向下对齐； * text-bottom:表示文字垂直向下对齐。 */ line-height: normal; /* * 用于设置文本的行距，属性设置语法如下： * line-height：normal|百分比|长度值 * normal：表示该属性的默认值； * 百分比：表示相对于字大小font-size的百分比 * 长度值：用具体的数值表示，其属性值可以问任意的长度单位：em px in pt pc cm mm等。 */ letter-spacing: normal; /* * 用于设置字符的间距，其属性设置语法如下： * letter-spacing：normal|长度值； * normal：表示该属性的默认值； * 长度值：用具体的数值表示，其属性值可以问任意的长度单位：em px in pt pc cm mm等。 * 我们也可以把长度值设置为负数，以打打紧缩字符行距的效果 */ }
- CSS字体属性 主要设置文字的属性
h2{
font-family: "微软雅黑";
/*
* 用于设置文字的字体，语法设置如下：
* font-family：字体；
* 可以设置多种字体，用逗号隔开，浏览器按照顺序查找系统可匹配的字体，若查找不到，浏览器会使用默认的字体。
*/
font-style: normal;
/*
* 用于设置文字的效果，其属性设置语法如下：
* font-style:normal|italic|oblique;
* normal:表示默认值
* italic：表示斜体
* oblique：表示歪斜体
*/
font-size: 10px;
/*
* 用于设置字体的大小，其属性设置语法如下：
* font-size:长度|关键字
* 长度：用具体的数值描述，单位可以问任意的长度单位：em px in pt pc cm mm等。
* 关键字;包括：XX-small、X-small、small、medium、large、XX-large、X-large、larger和smaller.
*/
font-weight: normal;
/*
* 用于设置文字的粗细，其属性设置语法如下：
* font-weight：normal|bold|bolder|lighter|100~900
*/
font-variant: normal;
/*
* 用于设置文字的变形属性，其属性设置语法如下：
* font-variant：normal|small-caps
*/
text-decoration:underline;
/*
* 用于设置文字的显示效果，其属性设置语法如下：
* text-decoration:underline|overline|line-through|blink|none
* 其中none是默认值，表示没有任何效果
* underline表示给文字加下划线
* overline是加上顶部线
* line-through是加上删除线
* blink表示文字闪烁
*/
text-transform:none;
/*
* 用于设置文字的转换效果，其属性设置语法如下：
* text-transform:none|capitalize|uppercase|lowrcase;
* none是默认值，表示没有任何的效果，
* capitalize表示英文单词的首字母转换为大写；
* uppercase表示所有英文字母转换为大写；
* lowrcase表示所有的英文字母转换为小写；
*/
}
- CSS边界属性 主要用margin属性来控制元素边界与网页其他内容的水平和垂直间距
img{ margin: 50px; /* * 用margin属性来控制元素边界与网页其他内容的水平和垂直间距,属性的语法如下： * margin：50px； * margin：50px 60px； * margin：50px 60px 70px； * margin：50px 60px 70px 80px； * 距离可以设置为具体数值和百分比形式； * 一个参数表示上下左右都用同一个距离； * 两个参数表示，则上下方向用参数1 水平方向用参数2 * 三个参数表示，则上方用参数1，左右方向用参数2，下方用参数3； * 四个参数表示，则上方用参数1，右方用参数2，下方用参数3，左方用参数4 */ margin-top: 50px; /* * 用于单独设置上边距 */ margin-bottom: 50px; /* * 用于单独设置下边距 */ margin-left: 50px; /* * 用于单独设置左边距 */ margin-right: 50px; /* * 用于单独设置右边距 */ }
- CSS边框属性 使用border属性来控制元素的边框宽度，样式，颜色
table{
border-width:thin;
/*
* border-width主要设置边框宽度,属性值可以取thin|medium|thick
* border-top-width: thin;主要设置上边框宽度;
* border-bottom-width: thin;主要设置下边框宽度；
* border-left-width: thin;主要设置左边框宽度；
* border-right-width: thin;主要设置右边框宽度；
*
*/
border-style: none;
/*
* 主要设置边框样式，属性值可设置为：none|dotted|dashed|solid|double|groove|ridge|inset|outset;
* border-top-style: none;设置上部边框样式
* border-bottom-style: none;设置下部边框样式
* border-left-style: none;设置左边边框样式
* border-right-style:none;设置右边边框样式
*/
border-color:none;
/*
* 用于设置边框的颜色,属性值均为颜色值
* border-top-color:none;用于设置上边框的颜色
* border-bottom-color:none;用于设置下边框的颜色
* border-left-color:none;用于设置左边框的颜色
* border-right-color:none;用于设置右边框的颜色
*/
}
- CSS边距属性 用padding设置元素的内容与元素边框之间的距离
from{
padding: 50px;
/*
* 用于设置边距的样色，属性住为距离
* padding-top:none;用于设置上边距的大小
* padding-bottom:none;用于设置下边距的大小
* padding-left:none;用于设置左边框的大小
* padding-right:none;用于设置右边框的大小
*/
}
- CSS列表属性
li{
list-style: none;
/*
* 用list-style设置文字列表属性，控制列表的符号和位置；
* list-style-type:none;用于设置列表的符号类型，其中取值如下：
* none|disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper=alpha
* list-style-image:url("该图片的URL地址");用于设定使用指定图像作为列表的符号，其值为该图像的URL地址
* list-style-position:outside;用于设置列表的项目符号，取值可以为outside和inside;
*/
}
- CSS定位属性
body{
top: 50px;;
left: 50px;
position: absolute;
z-index: 2;
/*
* top用于设置元素与浏览器窗口上方的距离
* left用于设定元素与浏览器窗口左方的距离
* position用于设置元素的位置模式，属性值可以为absolute|relative|static
* 其中static为属性的默认值，表示静态位置，absolute表示绝对位置，relastive表示相对位置；
* z-index使用该属性可以将页面元素分为多层显示，产生叠加的效果，该属性值为整数，可以是正整数和负整数。
*/
}