CSS样式
程序员文章站
2022-04-18 21:42:03
...
CSS基本样式
CSS注解语法:CSS注解语句是位于
标记之间的语句内容
- 内联样式:直接在页面文件中使用HTML标记的style属性。例如:
程序员
- 在页面文件中定义样式:这种方式是通过
{font-family: "微软雅黑";font-size: 12px;} #fromid {font-family: "微软雅黑";font-size: 12px;} .classid{font-family: "微软雅黑";font-size: 12px;}
- 在页面文件中嵌入外部样式表:语法如下
- 链接外部样式表:语法如下
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 */ }
上一篇: mysql数据库开启慢查询日志