한 배경
꺼내서는 "CSS 마스터"나는 최근에 거의 프런트 엔드를 쓸, 4 년 전 책을 볼 수 있지만, 독서 노트의 습관을 완료되지 않았습니다 후 많은 것들을, 지식은 잊고, 단지 CSS와 이제 어떤 변화와 발전, 다음 보너스에게 자신을 제공하기 위해 여러 블로그 시리즈로 출력을 마무리 패키지.
두 문자
1, 폰트 타입
(1) 폰트
글꼴 포인트 serif(有衬线)와 sans-serif(无衬线).
산세 리프는 리프보다 쉽게 읽을로 간주됩니다.
(2) 외부 폰트
@ 글꼴 얼굴 타사 글꼴을 도입 할 수있다.
2, 폰트 크기
font-size당신은 글꼴 크기, 단위 %, PX, EM, REM 수면을 설정할 수 있습니다.
(1) 단위 비교
| 단위 | 절대 값 | 상대 값 | 어떤 요소에 대하여 |
|---|---|---|---|
| PX | √ | N / A | |
| % | √ | 부모 요소 | |
| 에 | √ | 부모 요소 | |
| 렘 | √ | 루트 요소 (HTML / 본체 [HTML 바디보다 더 높은 우선 순위]) |
(2) 왜 REM 수면을 권장?
먼저 px이벤트의 상대적인 크기가하고 싶은 것입니다 모든 요소에 대한 글꼴을 확대 할 때 화면 적응 , 매우 불편하므로 패스.
그런 다음 %과 em문제점을 가지고 발생 부모 요소에 대해 각각의 엘리먼트에 대한 참조 프레임이 다른 계산하는 것은 매우 쉽다.
REM을 사용하는 것이 좋습니다.
(3) 방법 REM을 사용 하는가?
<style>
body {
font-size: 62.5%;
/* 因为浏览器默认字体大小为16px，
所以 100% = 16px
所以 62.5% = 10px */
}
#div1 {
font-size: 1rem;
/* 1rem = 1 * 10px = 10px */
}
#div2 {
font-size: 2.5rem;
/* 2rem = 2.5 * 10px = 25px */
}
</style>Q : 본체에 폰트 크기 설정이 아닌 다른 값보다 62.5 %가 왜?
A : REM 등의 기본 값이므로 10px, 그것은 두 가지 장점이있다 :
1, 좋은 계산을 지정했습니다.
2 진수 정수로 인해, (예를 들어 1.5rem = 15 픽셀)로 변환 될 경우 PX 함유 진수를 지원하지 않는 폰트 크기 .
셋째, 이미지
1 컬러
세 가지 유형의 CSS 색상 값 :
- 진수 - 예를 들면 : "#의 FF0000"
- RGB - 如 : "RGB (255,0,0)"
- 색 이름 - 예를 들면 : "빨간색"
2 이미지
(1) <img>알트 제목 차이점
alt사진이 존재하지 않는 대체 텍스트 경우, title설명 및 추가 지침의 사진입니다.
검색 엔진 최적화에 대한 가장 좋은 두 사람은 함께입니다.
3, 배경
(1) 등록
다음과 같은 순서로 :
- 배경색
- 배경 이미지
- 배경 반복
- 배경 - 첨부 파일
- 배경 위치
으로 background짧은 시간, 순서는 이상과 일치한다 :
body {background:#ffffff url('img_tree.png') no-repeat scroll right top;}
(2) 위치를 찾을 백그라운드
background-position: [横向] [纵向]
값 유형 :
키워드 : 상 / 하, 좌 / 우, 센터
백분율 : X %
값 : PX, EM 등
Q : 규칙의 비율이 다른 정의 된 이유는 무엇입니까?
A : 사실, 사람의 직관을 돌볼하기 위해 :
background-position: 0 0; //图片靠着左上角
background-position: 50% 50%; //图片水平垂直居中
background-position: 100% 100%; //图片靠着右下角 (3)의 배경 영역이 차지하는
1background-origin , background-clip값 :
border-box: 내용 + 패딩 + 국경
padding-box[기본] + 콘텐츠 패딩
content-box:함유량
2background-origin , background-clip차분 간 :
전자는 (백그라운드 출처에 기초한 값)을 절단 이동이다.
(4) 복수의 배경을 추가
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}쉼표로 구분 속성 1, 여러 사진.
도 2는, 제 사진 등 상단에 표시하고.
넷째, 링크
1, 링크 스타일
그렇지 않으면 일부는 실패, 다음과 같은 순서로 최고의 의사 클래스를 추가하십시오.
(1) : 링크 표시
(2) : 호버 호버
(3) : 활성 점
(4)는 : 포인트를 통해 방문
키보드가 링크로 이동하는 경우,이있을 것입니다 : 방문했다.
2, 고토 내 - #
<div id="main">
<a href="#target">click!</a>
<span>block——1</span>
<br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/>
<span id="target">block——2</span>
</div>1. 태그를 클릭하면 해당 항목으로 이동합니다.
2 브라우저를 열고 url#target자동으로 점프 (작동하지 않는 현재 페이지를 새로 고침) 수
V. 양식
실시 예 1의 형태
<table summary="三年二班2019期末考试 - 学生各科目成绩">
<caption>
三年二班2019期末考试
</caption>
<thead>
<tr>
<th colspan="3">学生各科目成绩</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td scope="col">语文</td>
<td scope="col">数学</td>
</tr>
<tr>
<td scope="row">张三</td>
<td>78</td>
<td>80</td>
</tr>
<tr>
<td scope="row">李四</td>
<td>92</td>
<td>88</td>
</tr>
<tr>
<td scope="row">王五</td>
<td>62</td>
<td>73</td>
</tr>
</tbody>
</table>(1) summary유사 <img>ALT 속성.
(2) th/td的 scope 属性用来标识是列头还是行头。
2、table 的 合并 / 分隔 - border / collapse
以上面的 demo 为例：
(1) 合并（collapsed）
table, td ,th{
border: 1px solid black;
}
table{
width: 200px;
}
/* 下面为重点 */
table{
border-collapse: collapse;
}
(2) 分隔（separated）
table, td ,th{
border: 1px solid black;
}
table{
width: 200px;
}
/* 下面为重点 */
table{
border-collapse: separate;
border-spacing: 10px;
}若 border-collapse: separate ，而省略 border-spacing，那 border-spacing 也是有默认值的且非0。( 0 则跟 border-collapse: collapse 一样了 )
3、各个 table 相关标签的对比
| 是否支持? | border | width/height | 是否符合盒模型 | margin | padding | text-align | vertical-align |
|---|---|---|---|---|---|---|---|
| table | √ | √ / √ | × | √ | √ | √ | × |
| caption | √ | √ / √ | √ | √ | √ | √（默认居中） | × |
| thead/tbody | × | × / × | N/A | × | × | √ | √ |
| tr | × | × / √ | √ | × | × | √ | √ |
| th/td | √ | √ / √ | √ | × | √ | √（默认居中） | √ |
唉，table 真的有太多坑了。
4、淘汰的 table 属性
(1) table 标签的 cellspacing/cellpadding 属性已被淘汰，请用border-spacing 和padding代替。
(2) 直接在 table 标签定义的 border=1不推荐使用，请在 CSS 里：
table, td ,th{
border: 1px solid black;
}六、表单
1、一个表单的范例
<form accept-charset="utf-8" action="form_action.asp" method="post">
<fieldset>
<div>
<!-- 关联 label 的方法一 -->
<label for="name">Name:</label>
<input name="name" id="name" type="text" />
</div>
<div>
<!-- 关联 label 的方法二 -->
<label>
Email:
<input name="email" type="text" />
</label>
</div>
<button type="submit">submit</button>
</fieldset>
</form>
1、fieldset 周围会加上一个细线边框（哪怕没有 legend 标签），想去掉就把 border 属性设置为 none 。
2、input 元素 focus 时默认会有一个蓝色轮廓，outline: none 可以去掉。