Home > Developer > Web Develop
Www.divcss8.com
in the previous section we talked about customizing ID selector, in order to later JS get content convenient, so that we can only use once. What if the CSS code wants to reuse it multiple times? Then it's time to use the custom class selector.
Let's look at one of the following examples:
<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>divcss8.com class Selector example </title>
<style type= "Text/css" >
. Diyi Li A{color: #f00;}
</style>
<body>
<ul>
<li><a href= "#" > project number 1</a></li>
<li><a href= "#" > project number 2</a></li>
</ul>
<ul>
<li><a href= "#" > project number 2</a></li>
<li><a href= "#" > project number 3</a></li>
</ul>
<a href= "#" > I will not be changed </a>
</body>
then the list of two items will change. It is also important to note that the CLASS selector can be used more than once. Add a space behind each name, such as class= "Diyi clear" so you can.
There is also a selector that is a universal selector that can be used for all The HTML tags are applied as follows:
*{padding:0px;margin:0px;}
I'll explain this in detail when I'm ready to put it in the layout.
we've been using inline styles, and we're now learning a new introduction CSS style is also the way we often use the link style later.
What are the benefits of using link styles:
1, for The convenience of SEO, if the use of inline style directly. That will cause spiders to crawl a lot of CSS code when crawling
2 . If our style needs to be applied to multiple files in the Web page. And the embedded is obviously not suitable, this time we have to use the link style we speak.
Syntax format:
<link type= "Text/css" rel= "stylesheet" href= "Css.css"/>
The most important thing is that href needs to be changed to the CSS style file that you wrote.
Summary: By using a link, this is what we said earlier . The separation of HTML from CSS . If you want to change the style of the page, just change the CSS style file. We can Baidu search the CSS Zen Garden. Html is fixed by changing the CSS style file and can see different styles of pages. Also novice learning CSS recommended to see the code, style files.
Priority of the style file:
Inline styles > inline Styles > link Styles > Import Styles
Let's get acquainted with an example.
<! DOCTYPE HTML PUBLIC "-//w3c//dtdxhtml 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>divcss8 Example </title>
<style type= "Text/css" >
P{color: #666; font-size:24px;}
</style>
<link rel= "stylesheet" type= "Text/css" href= "Divcss.css"/>
<body>
<pstyle= "COLOR: #f00;" >www.divcss8.com</p>
</body>
Divcss.css File
P{color: #0f0; font-weight:bold;}
Summary: Inline styles, embedded styles, and link styles, respectively, on Changes to the style are implemented in P. The final result is red due to the high priority of the inline style.
It is also important to note that the following style overrides the top style.
CSS selector naming
There are three types of CSS selectors to name: Camel nomenclature, Pascal's nomenclature, Hungarian nomenclature, and below we look at:
Camel name Law: refers to the combination of uppercase and lowercase letters to form, but also for later work in a team communication is more convenient. It features the following:
The first word begins with a lowercase letter, the first letter of the second word is capitalized, or the first letter of each word is in uppercase letters, for example:myfirstname
Pascal (Pascal ) Naming method:
this CSS naming conventions are similar to camel nomenclature. But the camel nomenclature is the first letter lowercase, and the Pascal nomenclature is capitalized
Hungarian nomenclature: prefix with one or more lowercase letters in front of the name
Red_navmenu
The above name does not say which one to use. The main is to let you write CSS code to make others look very professional. I understand. In the bottom I share some of the online summary of good naming norms.
We've learned so many selectors. Give everyone a test: Please say the following selectors will choose what object. The answer will be published in the next course.
Problem:
1,H1. p1{}
2,#content h1{}
3, H1. P1, #content H1
4,h1#content h2{}
This article is from "Shijingshan Computer Training" blog, please be sure to keep this source http://jiefei.blog.51cto.com/6994042/1557752
CSS Basics Series Tutorial: CSS basic Syntax 2
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
