CSS 스타일

CSS 기본 스타일

인라인 스타일 : 페이지 파일에서 직접 HTML 태그의 스타일 속성을 사용합니다. 예: 程序员

페이지 파일에서 스타일 정의: 태그를 통해 스타일을 정의하는 방법입니다. h1 { font-family : "微软雅黑" ; font-size : 12px ;} #fromid { font-family : "微软雅黑" ; font-size : 12px ;} .classid { font-family : "微软雅黑" ; font-size : 12px ;} 페이지 파일에 외부 스타일 시트 삽입: 구문은 다음과 같습니다 @import url("外部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 */ }