css학습(一)-CSS기초, css선택기
하나.CSS 기본: 1.css3의 새로운 기능: a. 강력한 css3 선택기 b. 그림을 버리는 시각적 효과 c. 배경의 변혁 d. 박스 모델 변화 e. 음영 효과 f. 다열 레이아웃과 탄성 박스 모델 레이아웃 g. 웹 글꼴과 웹 font 아이콘 h. 색과 투명도 i. 원각과 테두리의 새로운 방법 j. 박스 용기의 변형 i. css3 과도와 애니메이션 상호작용 효과 j. 미디어 특성과 Responsive 레이아웃 2.css3을 사용하는 장점: a. 개발과 유지보수의 비용을 줄인다. b. 페이지 성능을 향상시킨다.점진적 강화: a. 디자인할 때 먼저 저급 설비 사용자가 모든 내용을 볼 수 있는지를 고려한 다음에 이를 바탕으로 모든 고급 사용자를 위해 디자인한다.이것은'우아한 강등'2라고 부른다.css 선택기: 1.기본 선택기: a. 일반 선택기: (*) 모든 요소 b. 요소 선택기를 선택할 수 있습니다. (E) HTML 요소 c.ID 선택기: 요소 ID에 따라 해당하는 요소 d. 클래스 선택기: 문서 요소에 독립적으로 요소의 스타일을 지정합니다.클래스 선택기는 한 페이지에 여러 개의 같은 클래스 이름이 있을 수 있습니다. e. 다중 클래스 선택기: 여러 클래스 선택기에 포함된 클래스 이름 중 하나가 존재하지 않으면 이 선택기는 일치하는 요소를 찾을 수 없습니다.계층 선택기: a.E F(백그라운드 선택기): F는 E 요소 내 b.E>F(하위 선택기)에 포함됩니다. F 요소는 E 요소의 하위 요소입니다. c.E+F(인접 형제 선택기): F는 E 요소 뒤에 있는 d.E~F(공통 선택기): 일치하는 E 요소 뒤에 있는 모든 일치하는 F 요소.동적 위조 선택기: a.E:link(링크 위조 선택기): 접근한 적이 없는 링크나 닻점 b.E:visited(링크 위조 선택기): 접근한 링크나 닻점 c.E:active(사용자 행위 위조 선택기): 일치하는 요소가 활성화되어 닻점과 단추에 있는 d.E:hover(사용자 행위 위조 선택기)에 자주 사용됩니다. 마우스가 머무를 때 e.E:focus(사용자 행위 위조 선택기): 요소가 초점을 얻습니다
2) 실천:
1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css basic</title>
<style type="text/css">
*{margin: 0;padding:0;}
.clearfix:after, .clearfix:before{display:table;content:""}
.clearfix:after{
clear:both;
overflow: hidden;
}
.demo{
width:250px;
border:1px solid #ccc;
padding:10px;
margin:20px auto
}
.demo *{
background: orange;
}
ul{
background: grey;
}
li {
list-style:none outside none;
float:left;
height:20px;
line-height: 20px;
width:20px;
border-radius: 10px;
text-align:center;
background: #f36;
color:green;
margin-right: 5px;
}
#first{
background: lime;color:#000;
}
#last{
background: #000;color:lime;
}
.item{
background: green;
color:#fff;
font-weight: bold;
}
.item.important{
background: red;
}
</style>
</head>
<body>/home/abc/test/css/2-1.html
<ul class="clearfix demo">
<li class = "first" id = "first">1</li>
<li class="active">2</li>
<li class="important item">3</li>
<li class="important">4</li>
<li class="item">5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li class = "last" id ="last">10</li>
</ul>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
body{
width:300px;
margin:0 auto;
}
div{
margin:5px;
padding:5px;
border:1px solid #ccc;
}
div div {
background: orange;
}
body > div{
background: green;
}
.active + div{
background: lime;
}
.active ~ div{
background: red;
}
</style>
</head>
<body>
<div class ="active">1</div>
<div>2</div>
<div>3</div>
<div>4
<div>5</div>
<div>6</div>
</div>
<div>7
<div>8
<div>9
<div>10</div>
</div>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.download-info{
text-align: center;
}
.btn{
background-color: #0074cc;
*background-color:#0055cc;
background-image: -ms-linear-gradient(top,#0088cc,#0055cc);
border-image: -webkit-gradient(linear,0 0,0 100%,from(#0088cc),to(#0055cc));
border-image: -webkit-linear-gradien(top,#0088cc,#0055cc);
border-image: -o-linear-gradient(top,#0088cc,#0055cc);
border-image: -moz-linear-gradien(top,#0088cc,#0055cc);
border-image: linear-gradient(top,#0088cc,#0055cc);
border-image: linear-gradient(top,#0088cc,#0055cc);
background-repeat: repeat-x;
display: inline-block;
*display:inline;
border:1px solid #cccccc;
*border:0;
border-color: #ccc;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-radius: 6px;
color: #ffffff;
font-size: 20px;
font-weight: 20px;
font-weight: normal;
filter:progid:dximagetransform.microsoft.gradient(startColorstr='#0088cc',endColorstr='#0055cc',GradientType=0);
filter: progid:dximagetransform.microsoft.gradient(enabled=false);
line-height: normal;
padding:14px 24px;
text-align: center;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-decoration: none;
vertical-align: middle;
*zoom:1;
}
.btn:hover{
background-position: 0 -15px;
background-color: #0055cc;
*background-color:#004ab3;
color:#ffffff;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
-webkit-transition:background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ma-transition:background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
}
.btn:active{
background-color: #0055cc;
*background-color:#004ab3;
background-color: #004099 \9;
background-image: none;
outline: 0;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
color:rgba(255,255,255,0.75);
}
.btn:focus{
outline:thin dotted #333;
outline:5px auto -webkit-focus-ring-color;
outline-offset:-2px;
}
</style>
</head>
<body>
<div class = "download-info">
<a href="#" class = "btn">View project on GitHub</a>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.accordionMenu{
background: #fff;
color:#424242;
font:12px Arial,Verdana,sans-serif;
margin: 0 auto;
padding: 10px;
width:500px;
}
.accordionMenu h2{
margin:5px 0;
padding: 0;
position: relative;
}
.accordionMenu h2:before{
border:5px solid #fff;
border-color: #fff transparent transparent;
content:"";
height: 0;
position: absolute;
right: 10px;
top:15px;
width:0;
}
.accordionMenu h2 a{
background: #8f8f8f;
background: -moz-linear-gradient(top,#cecece,#8f8f8f);
background: -webkit-gradient(linear,left top,left bottom,from(#cecece),to(#8f8f8f));
background: -webkit-linear-gradient(top,#cecece,#8f8f8f);
background: -o-linear-gradient(top,#cecece,#8f8f8f);
background: linear-gradient(top,#cecece,#8f8f8f);
border-radius: 5px;
color:#424242;
display: block;
font-size: 13px;
font-weight: normal;
margin:0;
padding: 10px 10px;
margin:0;
padding: 10px;
text-shadow: 2px 2px 2px #aeaeae;
text-decoration: none;
}
.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active{
background: #2288dd;
background: -moz-linear-gradient(top,#6bb2ff,#2288dd);
background: -webkit-gradient(linear,left top,left bottom,from(#6bb2ff),to(#2288dd));
background: -webkit-linear-gradient(top,#6bb2ff,#2288dd);
background: -o-linear-gradient(top,#6bb2ff,#2288dd);
background: linear-gradient(top,#6bb2ff,#2288dd);
color:#FFF;
}
.accordionMenu p{
margin:0;
height:0;
overflow: hidden;
padding: 0 10px;
-moz-transition:height 0.5s ease-in;
-webkit-transition:height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
}
.accordionMenu :target p{
height:100px;
overflow: auto;
}
.accordionMenu :target h2:before{
border-color: transparent transparent transparent #fff;
}
</style>
</head>
<body>
<div class="accordionMenu">
<div class = "menuSection" id ="brand">
<h2><a href="#brand">Brand</a> </h2>
<p>Lorem ipsum dolor...</p>
</div>
<div class = "menuSection" id = "promotion">
<h2><a href = "#promotion">Promotion</a></h2>
<p>Lorem ipsum dolor sit amnt2...</p>
</div>
<div class="menuSection" id = "event">
<h2><a href ="#event">Event3</a></h2>
<p>Lorem ipsum dolor sit emet...3</p>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
:lang(en){
quotes: '"' '"';
}
:lang(en) {background: red;}
:lang(fr){
quotes:'<<' '>>';
}
:lang(fr) q {background: green;}
</style>
</head>
<body>
<p>target is test
<q cite="www.test.comet">
build a future where people live in harmony with nature
</q>we hope they succeed.</p>
</body>
</html>이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다른 사람의 웹사이트 편집: contenteditable 및 designMode그래도 우리가 그렇게 할 수 있다고 생각하는 것은 멋진 일입니다. 제가 강조하고 싶었던 일종의 관련 API가 실제로 몇 개 있기 때문에 오늘 그것을 가져왔습니다. contenteditable는 "true" 값이 할당...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
