CSS 기초 지식,스타일 을 알려 드 립 니 다.
CSS(Cascading Style Sheet):스타일 시트 언어 를 레이 어드 합 니 다.
CSS 의 역할 은:
HTML 페이지 를 수식 하고 HTML 페이지 의 일부 요소 의 스타일 을 설정 하여 HTML 페이지 를 더욱 아름 답 게 합 니 다.
HTML 페이지 에 CSS 를 사용 하 는 두 가지 방식 을 삽입 합 니 다.
첫 번 째 방식:탭 내부 에서 style 속성 을 사용 하여 요소 의 CSS 스타일 을 설정 합 니 다.이 방식 을 내 연 정의 방식 이 라 고 합 니 다.문법 형식:
<태그 style="스타일 이름:스타일 값;스타일 이름:스타일 값;스타일 이름:스타일 값;...>
두 번 째 방식:외부 스타일 시트 파일 에 체인 을 연결 하 는 방식 이 가장 많이 사용 된다.(스타일 을 독립 된 xxx.css 파일 에 쓰 고 필요 한 웹 페이지 에 css 파일 을 직접 도입 하면 스타일 이 도 입 됩 니 다)문법 형식:
， 。
xxx.css
1.html
2.html
3.html
4.html 내 연 정의 방식
<!doctype html>
<html>
<head>
<title>HTML CSS ： </title>
<head>
<body>
<!--
width
heght
background-color
display （none ，block ）
-->
<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border-color: red;border-width: 3px;border-style: solid"></div>
<!--
border: width style color
-->
<div style="width: 300px;height: 300px;background-color: #CCFFFF; display: block;
border: thick double yellow; "></div>
</body>
</html>
<!doctype html>
<html>
<head>
<title>HTML ： </title>
<style type="text/css">
/*
CSS
*/
/*
id
#id{
: ；
: ；
: ；
........
}
*/
#usernameErrorMsg{
font-size: 12px;
color: red;
}
/*
{
: ;
: ;
: ;
}
*/
div{
background-color: black;
border: 1px solid red;
width: 100px;
height: 100px;
}
/*
. {
: ;
: ;
: ;
}
*/
.myclass{
border: 2px double blue;
width: 400px;
height: 30px
}
</style>
</head>
<body>
<!--
12px,
-->
<!--<span id="usernameErrorMsg" style="font-size: 12px;color: red"> ， ！</span>-->
<span id="usernameErrorMsg""> ， ！</span>
<div></div>
<div></div>
<div></div>
<!--class 。-->
<br><br><br><br>
<input type="text" class="myclass"/>
<br><br><br><br><br>
<select class="myclass">
<option> </option>
<option> </option>
<option> </option>
</select>
</body>
</html>
css 파일
a{
text-decoration: none;
}
#baiduSpan{
text-decoration: underline;
cursor: wait;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML CSS ： </title>
<!-- css-->
<link type="text/css" rel="stylesheet" href="css/1.css"/>
</head>
<body>
<a href="http://www.baidu.com"> </a>
<span id="baiduSpan"> </span>
</body>
</html>
테두리
（1）
div{ border : 1px solid red; }
div{ border-width : 1px; border-style : solid; border-color : red; }
div{ display : none; }
div{ font-size : 12px; color : red; }
a{ text-decoration : none; }
a{ text-decoration : underline; }
ul{ list-style-type : none; }
:hover
div{ position : absolute; left : 100px; top : 100px; }
div{ cursor : pointer; }
이 글 은 여기까지 입 니 다.당신 에 게 도움 을 줄 수 있 기 를 바 랍 니 다.또한 당신 이 우리 의 더 많은 내용 에 관심 을 가 져 주 기 를 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
【Grunt】 복수의 CSS, JavaScript 파일을 minfy한다여러 CSS, JavaScript 파일을 Grunt를 사용하여 단번에 각각 하나의 파일로 minfy합니다. ① Gruntfile 작성 ② package.json 쓰기 ④ html CSS, JavaScript 지정 부...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
