Dark horse programmers third day
Today is the first day of learning css
1. Basic knowledge of css: css usage scenarios, beautify web pages, layout page
1.1 Introduction: css is a cascading style sheet
1.2 what styles are set by css : text content, pictures, layout.
1.3css grammar specification:
including: selector (whose style to change), style declaration (what style to change).
Position: <head></head>Medium
Syntax: Attribute: _value; Attribute; Attribute
2. Selector
Divided into basic selector and compound selector
2.1 Tag selector:
Definition: use html tag name as selector
Function: select all tags of a certain type Come out, modify the
2.2 type selector: (.)
Mantra: style point definition, structure class call, one or more, most commonly used in development.
Function: Differentially select different tags.
Note: You cannot use pure numbers and Chinese names; pinyin definitions are best written in full; do not add tag names after clicking .
Multiple class names: Assign multiple class names to a label.
①Multi-class name usage: multiple class names in the class, separated by spaces between the
class names
②Multi -class name usage scenario: put some label elements with the same style in one class 2.3id selector (#) id=...
Scenario: The unique element style
id of the page can only be called once (unique) id selector uses less
2.4 wildcard selector: (*)
select all the tags in the page
without calling,
it is used automatically . Only used in special circumstances.
3. Font attributes (define font family)
3.1 font-family (font family)
All fonts must be separated by English commas;
fonts composed of multiple words separated by spaces should be quoted.
Try to use the system default font
3.1 font-size (font size) px: unit (pixel) Google default: 16px
title tag needs to specify the font size separately;
you can specify the text size of the entire page for the body.
Expansion: ctrl+wheel: page zoom in and out, ctrl+0: restore
3.3 font- weight (font weight)
normal: normal font (400)
bold: bold (700)
bolder: extra thick. In
actual development, the numerical value is used to indicate bold and thin without unit.
3.4 font-style (font style) is
mainly for oblique,
normal: the default value; italic: oblique
3.5 font compound attribute writing The
writing
order of the text style is integrated : font-style, font-weight, font-size/line-height, font- The family
must be written in order, and each attribute
must be separated by spaces. Font-size and font-family must be retained.
4 Text attributes (define the appearance of the text)
4.1 Color (text color)
predefined: English
hexadecimal: #... (most used )
RGB code: rgb (.,.,.)
Notes: #ffffff: white; #000000: black; #ff0000: red
rgba code adds a transparent color
4.2 text-align (aligned text) horizontal alignment
property: left (left ); right (right); center (center)
text alignment does not take effect for span, a, em, ins, strong, etc.
4.3 text-decoration (text decoration)
can add underline, strikethrough, and overline
attributes to the text : none Default not; underline underline; line-throught strikethrough; overline
a{text-decoration: none}: cancel underline
4.4 text-indent (text indent)
the indentation of the first line of the text (the first line of the paragraph)
em Yes A relative unit, one text size relative to the current element.
Only effective for elements on a single line.
4.5 line-height (line spacing) is
used to control the distance between text lines.
Line spacing: top spacing, bottom spacing, text height
5 css three species introduced embodiment
5.1 css three styles sheet
5.11 internal stylesheet: internal write html
theory can be placed anywhere html, generally placed / head on
5.12 inline style sheet:
setting style style attributes within the element tag
is not To achieve separation, use when there are few styles, not recommended
5.13 External style sheet:
suitable for more styles.
Write separately in the .css file, and import the css file into the html
css file. Only styles, no tags.
Create a new .css file and write code. In the html page, use the link tag Import this file
<link rel="stylesheet" href=".css文件">
6 Chrome debugging tool
6.1 Open debugging tool: F12 or right click (check)
6.2 Use debugging tool
6.11 ctrl+wheel: zoom; ctrl+0: restore
6.12 left: html; right: css
6.13 check errors
7 Baidu case:
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
text-align: center;
font: 15px 'microsoft yahei';
}
.xiahuaxian {
text-decoration: none;
font-weight: 700;
color: #000000;
}
.box {
width: 400px;
height: 40px;
}
.box1 {
width: 100px;
height: 45px;
}
a {
color: rgb(87, 0, 128);
}
p {
color: gray;
}
</style>
</head>
<body>
<div><img src="./image/bdlogo.gif" alt=""></div>
<div><a href="#">新闻</a>
<a href="#" class="xiahuaxian">网页</a>
<a href="#">贴吧</a>
<a href="#">知道</a>
<a href="#">音乐</a>
<a href="#">图片</a>
<a href="#">视频</a>
<a href="#">地图</a>
</div><br><br><br>
<div>
<input type="text" class="box"> <button class="box1">百度一下</button>
</div><br><br><br>
<div>
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao12 | </a>
<a href="#">更多>></a>
</div><br><br><br>
<div>
<img src="./image/ic.jpg" alt="">
<a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div><br><br><br>
<div>
<a href="#">把百度设为主页安装百度卫士</a><br><br>
<a href="#">加入百度推广|</a>
<a href="#">搜索风云榜|</a>
<a href="#">关于百度|</a>
<a href="#">About Baidu|</a><br>
<p>
©2013 Baidu 使用百度前必读 京ICP证030173号
</p>
</div>
</body>
</html>
8 Experience:
Today is the first day of learning css. After yesterday’s teacher’s help, I previewed today’s course, which made my study easier. I hope I can learn more tomorrow, and I will always study hard.