CSS+DIV第一天_html/css_WEB-ITnose-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

CSS+DIV第一天_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 pm 12:33 PM

CSS基础

引用方法：

基本语句结构：选择符{属性1：属性值1;属性2：属性值2}

选择符:可以是HTML中任何的标识符，比如TR、TD、P、DIV、IMG甚至BODY都可以作为选

择符。选择符中的内容将会以大括号内属性值定义的格式来显示。

除了选择符外,css还提供了几种选择器来让html调用css:

群选择器:当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔，：

p, td, li { font-size : 12px ; }

id选择器:用CSS布局主要用层"div"来实现，而div的样式通过"id选择器"来定义。

例如我们首先定义一个层

menubar就是我们要用到的样式，在样式表里是这样定义的。

#menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}

对，前面加个#即可！

类别选择器：如果想用class=""来引用样式的话，那么就需要一个类别选择器，其做

法是在定义在选择符前加一个“.”

如：.14px {color : #f60 ;font-size:14px ;}

此时就可以通过来调用了。

--------------------------------------------------------------------

基本的css调用已经复习完了。只要学会了编写css，配合上这些个调用方法，就可以玩转网页喽。
css的属性多的数不胜数，然而和任何一种语言一样，只要掌握了1/3的常用属性，就可以实现90%的功能，
所以我们先捡常用的来学。

css的常用属性：

字体属性：

这是最基本的属性，主要包括以下几个属性：

因为字体属性经常用到，驼驼比较熟悉，就暂且滑过。

颜色和背景属性

用法是这个样子的

属性：background 属性值：|||| 　　　
　||||

此处也不多言,会了用法,用到的时候来抠就行了.

文本属性:

此处不同于上面的字体属性.它涉及到排版:行间距,字间距,文字装饰等等,我得承认,这很重要.

装饰超级链接:

这是比较常见css应用,是的,页面上永远都有那么多超级链接,超级链接的修饰永远都是很重要,
虽然我今天以前从来没仔细看过这一块,但它现在看起来也蛮简单.

CSS中用四个伪类来定义链接的样式，分别是：a:link、a:visited、a:hover和a : active，例如：

a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}

以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。
注意，必须按以上顺序写，否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。

下面这段代码很有趣,可以点击这里看到它的效果

link css
　　　
　　　
　　
　　
　　

　　未访问的链接

　　 //*加链接，显示三种不同状态，并且定义了链接文本的字体和大小*//
　　

访问过的链接

鼠标激活的链接

这个例子是从洪恩在线上copy过来的，驼驼以前做过这种咚咚，copy了一大段的js代码。
这算是种特效吧，而它的原理so easy 驼驼以前不是不会用link的css，只是没有想到。
所以很多时候创造力和想像力是很重要的。

容器属性：虾米是容器？驼驼到现在还没找到一个定律一样的解释。8过，凭经验，<body></body><div></div>、<tr></tr>......类似的标签都是容器。这些标签就像容器，

罐装了我们的网页内容。使他们能在正确的位置来体现。CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性

 <pre class="sycode" name="code">边距属性

例：body{margin：1em 2em 3em 4em}　　//*定义文本的上、右、下、左的边距分别为1、2、3、4em*//

填充距属性

例：padding：1em 2em 3em 4em

边框属性

看上去很多，实际用起来很方便。

例：P{border：5px double purple}//*定义了四条边框为一样的值*//

图文混排

img{margin-right：2em；float：left}//*定义图片的右边距为2em，图片浮动在文字的左边*//

鼠标属性

　在CSS当中，这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值，

  我们来看一下它的详细列表

例子：<span style=“cursor:hand”>手的形状</span>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

관련 기사

HTML : 프로그래밍 언어입니까 아니면 다른 것입니까?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworksporstylingandjavaScriptOfforIncincivity, WebDevelopment 향상.

HTML : 웹 페이지 구조 구축Apr 14, 2025 am 12:14 AM

HTML은 웹 페이지 구조를 구축하는 초석입니다. 1. HTML은 컨텐츠 구조와 의미론 및 사용 등을 정의합니다. 태그. 2. SEO 효과를 향상시키기 위해 시맨틱 마커 등을 제공합니다. 3. 태그를 통한 사용자 상호 작용을 실현하려면 형식 검증에주의를 기울이십시오. 4. 자바 스크립트와 결합하여 동적 효과를 달성하기 위해 고급 요소를 사용하십시오. 5. 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함되며 검증 도구가 필요합니다. 6. 최적화 전략에는 HTTP 요청 감소, HTML 압축, 시맨틱 태그 사용 등이 포함됩니다.

텍스트에서 웹 사이트로 : HTML의 힘Apr 13, 2025 am 12:07 AM

HTML은 웹 페이지를 작성하는 데 사용되는 언어로, 태그 및 속성을 통해 웹 페이지 구조 및 컨텐츠를 정의합니다. 1) HTML과 같은 태그를 통해 문서 구조를 구성합니다. 2) 브라우저는 HTML을 구문 분석하여 DOM을 빌드하고 웹 페이지를 렌더링합니다. 3) 멀티미디어 기능을 향상시키는 HTML5의 새로운 기능. 4) 일반적인 오류에는 탈수 된 레이블과 인용되지 않은 속성 값이 포함됩니다. 5) 최적화 제안에는 시맨틱 태그 사용 및 파일 크기 감소가 포함됩니다.

HTML, CSS 및 JavaScript 이해 : 초보자 안내서Apr 12, 2025 am 12:02 AM

WebDevelopmentReliesonHtml, CSS 및 JavaScript : 1) HtmlStructuresContent, 2) CSSSTYLESIT, 및 3) JAVASCRIPTADDSINGINTERACTIVITY, BASISOFMODERNWEBEXPERIENCES를 형성합니다.

HTML의 역할 : 웹 컨텐츠 구조Apr 11, 2025 am 12:12 AM

HTML의 역할은 태그 및 속성을 통해 웹 페이지의 구조와 내용을 정의하는 것입니다. 1. HTML은 읽기 쉽고 이해하기 쉽게하는 태그를 통해 컨텐츠를 구성합니다. 2. 접근성 및 SEO와 같은 시맨틱 태그 등을 사용하십시오. 3. HTML 코드를 최적화하면 웹 페이지로드 속도 및 사용자 경험이 향상 될 수 있습니다.