Four ways to implement CSS and introduction to selectors
CSS implementation and selector
Contents of this lesson:
1. Four ways to implement CSS
1, in each htmltag There is a style style attribute, and the value of this attribute is the css code. (For a tag)
2, use style tag . Generally defined in the head tag. (For multiple identical tags)
3, when multiple pages use the same style, the style can be individually packaged as a CSS fileImport
4, link a CSS file through the link tag in the HTML header tag
Tag selector div{}
Class selector .haha
id selector #qq (The value of id is unique in the page, because this attribute is not only given to CSS Use, but also for javascript)
The class selector is used the same as the id selector. The priority of the id selector is higher than the class selector. The lower the priority, the higher
3. CSS Notes
css: Separate web page content and display style to improve the display function.
CSS cascading style sheets
separates the styles in the web page and is completely controlled by CSS, enhancing style reusability and scalability.
Format: selector {Attribute name: attribute value; Attribute name: attribute value;...}
4 ways to combine CSS with HTML:
1. Each Every HTML tag has the style attribute
2. When there are multiple tags on the page with the same style, you can define the style tag to encapsulate the style for reuse
css”>css code
3. When multiple pages use the same style, the style can be individually encapsulated as a CSS file and imported
4. Link a CSS file through the link tag in the HTML header tag
Tips: In order to improve the reusability and scalability of styles, define multiple styles separately and combine them Encapsulate it into CSS files, such as p.css, div.css... In a general CSS file, use import to import these CSS files, and then use the link tag in the HTML page to import the general CSS file.
Priority: Proximity principle The style attribute set on the label can override other styles
Selector:
1. Label selector: each The HTML tag name is a selector
2. Class selector: The class attribute in the tag is specified. Add a dot when defining the style. Use className
when referencing js. 3. ID selector: The id of the tag Attributes should be as unique as possible to facilitate JavaScript to obtain elements
4. Extension selector:
a. Association selector: The label in the label table div represents the table div div area
b. combinationselector: multiple selectors separated by commas
c. Element selector: the state of the element is such as the default state of a hyperlink, click Status, hover status, etc.
a:link a:visited a:hover a:active LVHA order
Delete hyperlinks by default underline: text-decoration: none
p :first-letter p:first-line focus: IE6 does not support
CSS filters: styles enriched by some codes
When designing web pages, DIV+CSS
# DIV and P tags belong to the row -level area, and the Enter effect. The SPAN tag is a block -level area, without the effect of the car. Set DIV tag
4. Code 1
1 <!-- 2 本课内容： 3 一、实现CSS四种方式 4 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签) 5 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签) 6 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入 7 <style type=”text/css”>@import url(“1.css”);</style> 8 4，通过HTML头标签中的link标签链接一个CSS文件 9 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>10 二、选择器11 标签选择器 div{}12 类选择器 .haha13 id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)14 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高
15 -->16 <!DOCTYPE html>17 <html>18 <head>19 <meta charset="UTF-8">20 <title>Insert title here</title>21 <!-- type指定下面的css以什么方式解析 -->22 <!--指定这两个样式都作用与div，所以用div后的大括号括起来-->23 <!-- css一般放在头部，因为要预先加载，所以每个出现div的位置都已经被换了样式 -->24 <!--25 第二种方式：26 标签选择器27 div{28 background-color: #000;29 color: #FFF
30 }31 32 -->33 <!-- @IMPORT url("div.css?1.1.11");第三种方式 -->34 <!-- 第四种 link -->35 <link rel="stylesheet" href="div.css?1.1.11" type="text.css?1.1.11">36 <style type="text/css">37 /*38 @IMPORT url(1.css);39 @IMPORT url(div.css);40 @IMPORT url(span.css);41 */42 div.haha{43 background-color: #000;44 }45 </style>46 <!-- 类选择器div.haha 优先级比标签选择器高 约少数，优先级越高 -->47 <!-- 类选择器不仅可以相同标签的少部分做，还可以对不同的标签做 -->48 <!-- div.haha中的div可以不写，.haha，那就所有的有哈哈类的都变了 -->49 <!-- 按钮加多套这样的.haha实现动态样式 -->50 </head>51 <body>52 <!--53 css和html相结合的第一种方式54 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)55 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)56 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入57 <style type=”text/css”>@import url(“1.css”);</style>58 4，通过HTML头标签中的link标签链接一个CSS文件59 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>60 61 -->62 <!-- -->63 64 65 <!-- 样式的重叠 重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -->66 <!-- color: #F00 为颜色的缩写 -->67 <div style ="color: #F00">这是一个div区域1</div>68 <div class="haha">这是一个div区域2</div>69 <span>span区域1</span>70 <span>span区域2</span>71 <p>这是一个段落1</p>72 <p>这是一个段落2</p>73 74 75 </body>76 </html>Copy after login
1 <!-- 2 本课内容： 3 一、实现CSS四种方式 4 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签) 5 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签) 6 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入 7 <style type=”text/css”>@import url(“1.css”);</style> 8 4，通过HTML头标签中的link标签链接一个CSS文件 9 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>10 二、选择器11 标签选择器 div{}12 类选择器 .haha13 id选择器 #qq (id的取值在页面中是唯一的，因为该属性除了给CSS使用，还要给javascript使用)14 类选择器和id选择器用法一样，id选择器的优先级比类选择器高，优先级越少越高
15 -->16 <!DOCTYPE html>17 <html>18 <head>19 <meta charset="UTF-8">20 <title>Insert title here</title>21 <!-- type指定下面的css以什么方式解析 -->22 <!--指定这两个样式都作用与div，所以用div后的大括号括起来-->23 <!-- css一般放在头部，因为要预先加载，所以每个出现div的位置都已经被换了样式 -->24 <!--25 第二种方式：26 标签选择器27 div{28 background-color: #000;29 color: #FFF
30 }31 32 -->33 <!-- @IMPORT url("div.css?1.1.11");第三种方式 -->34 <!-- 第四种 link -->35 <link rel="stylesheet" href="div.css?1.1.11" type="text.css?1.1.11">36 <style type="text/css">37 /*38 @IMPORT url(1.css);39 @IMPORT url(div.css);40 @IMPORT url(span.css);41 */42 div.haha{43 background-color: #000;44 }45 </style>46 <!-- 类选择器div.haha 优先级比标签选择器高 约少数，优先级越高 -->47 <!-- 类选择器不仅可以相同标签的少部分做，还可以对不同的标签做 -->48 <!-- div.haha中的div可以不写，.haha，那就所有的有哈哈类的都变了 -->49 <!-- 按钮加多套这样的.haha实现动态样式 -->50 </head>51 <body>52 <!--53 css和html相结合的第一种方式54 1，每个html标签中都有一个style样式属性，该属性的值就是css代码。(针对一个标签)55 2，使用style标签的方式。 一般都定义在head标签中。(针对多个相同的标签)56 3，当多个页面使用相同样式时，可将样式单独封装为CSS文件导入57 <style type=”text/css”>@import url(“1.css”);</style>58 4，通过HTML头标签中的link标签链接一个CSS文件59 <link rel=”stylesheet” href=”1.css” media属性可选，默认设备屏幕/>60 61 -->62 <!-- -->63 64 65 <!-- 样式的重叠 重复样式一最后加载为主，不重复样式层叠，其实都是层叠 -->66 <!-- color: #F00 为颜色的缩写 -->67 <div style ="color: #F00">这是一个div区域1</div>68 <div class="haha">这是一个div区域2</div>69 <span>span区域1</span>70 <span>span区域2</span>71 <p>这是一个段落1</p>72 <p>这是一个段落2</p>73 74 75 </body>76 </html>
五、代码二
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><!--link rel="stylesheet" href="1.css?1.1.11" type="text/css" /--><style type="text/css">/*@import url(1.css);
div{
background-color:#09F;
color:#FFF;
}
.haha{
background-color:#FF3;
color:#0C0;
}*//*预定样式，实现动态的加载。.hehe{
background-color:#C93;
color:#00F;
}*//*#qq{通常ID的取值在页面中是唯一的，因为该属性除了给css使用，还可以被js使用。id通常都是为了去标示页面中一些特定区域使用的。
background-color:#000;
color:#FFF;
}*//*span b{关联选择器 选择器中的选择器background-color:#09F;
color:#FFF;
}*//*组合选择器*//*.haha,div b{对多种选择器进行相同样式定义background-color:#000;
color:#C00;
}*//*伪元素
超链接的状态。*//*未访问*/a:link{background-color:#06F;color:#FFF;text-decoration:none;font-size:18px;}/*鼠标悬停*/a:hover{background-color:#FFF;color:#F00;font-size:24px;}/*点击效果*/a:active{background-color:#000;color:#FFF;font-size:36px;}/*访问后效果*/a:visited{background-color:#FF9;color:#000;text-decoration:line-through;}p:first-letter{font-size:36px;color:#F00;}div:hover{background-color:#F00;color:#FFF;}input:focus{background-color:#09F;}#qq{float:left;}/*L V H A*/</style></head><body><input type="text" /><input type="text" /><hr /><a href="http://www.sina.com.cn" target="_blank">伪元素选择器演示</a><hr /><!--css和html相结合的第一种方式。
1，每一个html标签中都有一个style样式属性。该属性的值就是css代码。
2，使用style标签的方式。 一般都定义在head标签中
优先级：标签选择器<类选择器<id选择器<style属性 --><div id="qq">这是一个div<b>区域</b>1</div><div class="haha" id="qq">这是一个div区域2</div><span>span<b>区域</b>1</span><span class="haha">span区域2</span><p>这是一个段落1</p><p class="haha">这是一个段落2</p></body></html>
The above is the detailed content of Four ways to implement CSS and introduction to selectors. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
