Home > Web Front-end > CSS Tutorial > CSS Basics (Summary)

CSS Basics (Summary)

WBOY
Release: 2018-09-27 15:10:01
Original
1921 people have browsed it

this chapter introduces you to some basic knowledge of css (summary), which has certain reference value. friends in need can refer to it. i hope it will be helpful to you.

css basic structure

CSS Basics (Summary)

four ways to introduce css

1. inline style:it is to set the css style in the style attribute of the tag. this method does not reflect the advantages of css and is not recommended.

2. embedded:embedded is the css style focus on writing the tag pair of the tag pair on the web page

3 ,link type:introduce a .css file into the html file (recommended)

4. import: introduce an independent .css file into the html file. the import uses css rules to introduce external css files. the

this method has the disadvantage that the browser will load the html page first and then the css style, so the network speed if it is slow or the web page is large, the client will appear first with the web page and then with the style last

css selector

CSS Basics (Summary)

1. class selector p>

(1) syntax: .class name {style attribute: value;}

(2) the element uses class="class name" to use this style

2. id selector

(1) grammar : #id name {style attribute: value;}

(2) elements use id= "id name" to use this style

3. tag selector strong>

(1) syntax: tag name {style attribute: value;}

(2) all the tags on the page are of this style

4. universal selector

(1) syntax: *{style attribute: value;}

(2) all elements on the page are of this style

selector priority

css with inherited properties, it is dependent on the ancestor-descendant relationship. inheritance is a mechanism that allows styles to be applied not only to a specific element, but also to its descendants. for example, a color value defined by body will also be applied to the text of the paragraph. generally, the inside takes precedence over the outside, and the back takes precedence over the front.

the so-called css priority means that the css style is used in the browser the order of analysis. the specificity in the style sheet describes the relative weight of different rules. its basic rules are:

1. the inline style sheet has the highest weight ------------1000;

2. count the number of id attributes in the selector. #id --------100

3 .count the number of class attributes in the selector. .class --------10

4. count the number of html tag names in the selector. p ------------1 ;">add the strings of numbers bit by bit according to these rules to get the final weight, and then compare them bit by bit from left to right when comparing and choosing.

css attribute operation

color: color

horizontal alignment: text-align

background attribute

background-color: cornflowerblue
 
background-image: url('1.jpg');
 
background-repeat: no-repeat;(repeat:平铺满)
 
background-position: right top(20px 20px)
Copy after login

the above code is generally written in one line

background:#ffffff url('CSS Basics (Summary)') no-repeat right top;
Copy after login

border attribute

border-style: solid;
border-color: chartreuse;
border-width: 20px;
Copy after login

the above code is generally abbreviated as

border: 30px rebeccapurple solid;
Copy after login

the border can also be set to only one side

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;
Copy after login

list attribute

list-style-type         设置列表项标志的类型。
list-style-image    将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
Copy after login

list-style: shorthand attribute, used to set all attributes for lists in one statement .

ul
  {
  list-style:square inside url('/i/arrow.gif');
  }
Copy after login

other attributes

/*
font-size: 10px;   字体的大小
line-height: 200px;   文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:-4px  设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效

font-family: 'lucida bright'  字体
font-weight: lighter/bold/border/ 字体粗细
font-style: oblique 字体样式(如斜体)
text-indent: 150px;      首行缩进150px
letter-spacing: 10px;  字母间距
word-spacing: 20px;  单词间距

text-transform: capitalize/uppercase/lowercase ; 文本转换,用于所有字句变成大写或小写字母,或每个单词的首字母大写
*/
Copy after login

text-decoration attribute is used to set or delete text decoration. mainly used to remove the underline of the link

text-decoration:none
Copy after login

conclusion

i have been studying html recently and i probably have a simple understanding. you have a general understanding of the basic syntax and structure of css, and you still need to practice and apply it in subsequent studies. the above is a summary of the basic content of css

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template