Xiaoqiang의 HTML5 모바일 개발 도로(4) - CSS2 및 CSS3-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

Xiaoqiang의 HTML5 모바일 개발 도로(4) - CSS2 및 CSS3

黄舟

Jan 22, 2017 am 10:34 AM

이전 기사에서 HTML5를 배우려면 CSS에 대한 지식이 필요하다고 언급했습니다. 페이지를 디자인할 때 HTML5 페이지의 레이아웃과 구조를 알아야 매우 아름답고 아름다운 인터페이스를 얻을 수 있습니다. . 먼저 CSS2의 기본적인 사용법을 살펴본 후 CSS3과의 관계 및 차이점을 살펴보겠습니다.

1. CSS란 무엇인가요?

캐스케이딩 스타일시트(Cascading Style Sheet)는 웹 페이지에 대한 표현을 제공합니다. W3C 규격에 따르면 웹페이지를 디자인할 때 웹페이지의 데이터와 구조는 html 파일로 작성하고, 웹페이지의 외형은 CSS 파일로 작성하고, 웹페이지의 동작은 다음과 같이 작성해야 한다. .js 파일에 작성되었습니다. 이는 코드 유지 관리를 용이하게 하기 위해 웹 페이지의 데이터, 모양 및 동작을 분리하는 것입니다.

2. CSS 선택자:

(1) 태그 선택자(단순 선택자)

(2) 클래스 선택자

.s1{  
    属性名：属性  
}

로그인 후 복사

도 있습니다 다음과 같은 이름을 가진 클래스 선택기:

 div.s1{  
    font-size;120px;  
}

로그인 후 복사

(3) id 선택기

#d1{  
    font-size:italic;  
    font-weight:900;  
}

로그인 후 복사

(4) 선택기 그룹화

h1,h2,h3{   //用逗号隔开  
<span style="white-space:pre">  </span>color:bllue;  
    }

로그인 후 복사

(5) 선택 파생

#d2 p{  
span style="white-space:pre">   </span>color:red;  
font-size:300;  
    }

로그인 후 복사

CSS 주석

/*   */

로그인 후 복사

스타일 우선순위:

외부 스타일, .css에 스타일 작성
파일의 내부 스타일, .html 파일에 스타일을 작성하세요.
인라인 스타일, style=" "
안에 스타일을 작성하세요. 충돌이 발생하는 경우: 외부 스타일 < 내부 스타일 <

CSS의 두 가지 주요 속성:

(1) 표시 속성

에는 세 가지 값이 있습니다.
block by block Display 마크를 마크
inline 마크를 인라인 마크로 표시

없음 표시하지 않음

<html>  
    <!--display属性-->  
    <head>  
        <style>  
            #d1{  
                width:200px;  
                height:100px;  
                background-color:red;  
                color:white;  
                font-size:40px;  
                display:inline; <!--改为行内标记-->  
            }  
            #d2{  
                width:200px;  
                height:100px;  
                background-color:blue;  
                color:white;  
                font-size:40px;  
                display:inline; <!--改为行内标记-->  
            }  
        </style>  
    </head>  
    <body>  
        <div id="d1">hello1</div>  
    <!--标记d2会另起一行显示-->  
        <div id="d2">hello2</div>  
    </body>  
</html>

로그인 후 복사

(2) 위치 속성
에는 세 가지 값이 있습니다. 🎜> 정적: 기본값입니다. 브라우저는 기본 방식(왼쪽-오른쪽, 위-아래)으로 태그를 배치합니다.
절대: 상위 태그(태그가 위치한 태그)를 기준으로 한 오프셋입니다.
상대: 먼저 기본 방식으로 배치한 다음 오프셋을 적용합니다.

자주 사용되는 속성은 다음과 같습니다.

 (1)文本相关的属性  
font-size:30px; //字体大小  
font-style:normal(正常)/italic(斜体)  
font-weight:800; //100－900 (粗细)  
font-family:"宋体"; //字体  
text-align:left/center/right;  //文本水平对齐方式  
line-height:30px;  //行高  一般和容器的高值相同放在中间  
cursor:pointer/wait;   //光标的形状  
    (2)背景相关的属性  
background-color:red;  //背景颜色  
background-color:#88eeff;  //RGB格式颜色设置  
background-color:rgb(100,100,100);  //可以用这种格式输入十进制数的颜色值  
background-image:url(images/t1.jpg);  //背景图片  
background-repeat:no-repeat/repeat-x/repeat-y;   //平铺方式  
background-position:30px 20px; //(水平和垂直)背景位置  
background-attachment:scroll(默认)/fixed;  //依附方式    
也可以同时设置背景的多个特性：  
background:背景颜色 背景图片 平铺方式 依附方式  水平位置 垂直位置；  
    (3)边框  
border-left:1px solid red;  
border-right:2px dotted black;  
border-bottom:  
border-top:  
border:1px solid red;  
    (4)定位  
width:100px;  
height:200px;  
margin  //外边距  
margin-left:20px;  
margin-right:30px;  
margin-top:40px;  
margin-buttom:50px;  
可以简化为：margin:top right bottom left;  
      margin:40 30 50 20;  
padding  //内边距  
padding-left:  
padding-right:  
padding-top:  
padding-buttom:  
可以简化为：padding:top right bottom left;  
内边距会将父标记撑开  
     (5)浮动  
取消标记独占一行的特性  
float:left/right;  //向左，向右浮动  
clear:both;  //清除浮动的影响  
     (6)其他  
list-style-type:none;除掉列表选项的小圆点。  
text-decoreation:underline;    //给文本加下划线  
     (7)连接的伪样式  
a:link{color:red} 没有访问时  
a:visited{color:blue} 鼠标放上时  
a:action{color:green} 鼠标点击时  
a:hover{color:yellow} 鼠标离开时

로그인 후 복사

위는 앞서 배운 CSS의 기본 요약입니다. css3의 특성에서 먼저 css3 참조 매뉴얼을 열어보세요. (다운로드 주소: http://download.csdn.net/detail/lxq_xsyu/6784027)

먼저 border-color를 보고 테두리를 설정하세요

관련 속성: border-top-color, border-right-color, border-bottom-color, border-left-color

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta http-equiv="Content-Language" content="utf-8" />  
<meta name="robots" content="all" />  
<meta name="author" content="Tencent-ISRD" />  
<meta name="Copyright" content="Tencent" />  
<title>Border-color</title>  
<style>  
    div{  
        border: 8px solid #000;  
        -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
        -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
        -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
        -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;  
        padding: 5px 5px 5px 15px;  
    }  
</style>  
</head>  
<body>  
<div>在Firefox浏览器里能看到边框颜色渐变效果</div>  
</body>  
</html>

로그인 후 복사

이 설정 테두리는 Firefox 브라우저에서만 지원됩니다. 효과는

Xiaoqiang의 HTML5 모바일 개발 도로(4) - CSS2 및 CSS3

css3이 스타일 속성을 많이 추가하는 것을 css3.0 참고서에서 볼 수 있습니다. 이 매뉴얼을 참조하면 보다 멋진 인터페이스 효과를 만들 수 있습니다. css2.js와 결합하면 페이지 애니메이션 제작도 가능합니다.

인터페이스 요소에 둥근 모서리 효과를 만드는 방법을 살펴보겠습니다

CSS2에서 이 효과를 얻으려면 두 개의 그림을 만들어야 합니다. 코드는 다음과 같습니다.

<html>  
    <head>  
        <style type="text/css">  
            a{  
                display:block;  
                height:40px;  
                float:left;  
                font-size:1.2em;  
                padding-right:0.8em;  
                background:url(images/headerRight.png) no-repeat scroll top right;  
            }  
              
            a span{  
                background:url(images/headerLeft.png) no-repeat;  
                display:block;  
                line-height:40px;  
                padding-left:0.8em;  
            }  
        </style>  
    </head>  
    <body>  
        <a href="#"><span>Box Title</span></a>  
    </body>  
</html>

로그인 후 복사

위의 방법으로 문제가 해결되었으나, 중복된 태그를 추가하여 css3을 사용하여 해결하는 방법을 살펴보겠습니다.

<html>  
    <head>  
        <style type="text/css">  
            a{  
                float:left;  
                height:40px;  
                line-height:40px;  
                padding-left:0.8em;  
                padding-right:0.8em;  
                border-top-left-radius:8px;  
                border-top-right-radius:8px;  
                background-image:url(image/headerTiny.png);  
                backgrount-repeat:repeat-x;  
            }  
        </style>  
    </head>  
    <body>  
        <a href="#"><span>Box Title</span></a>  
    </body>  
</html>

로그인 후 복사

위. Xiaoqiang의 HTML5 모바일 개발 길입니다(4) - CSS2 및 CSS3의 내용 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!

본 웹사이트의 성명

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