CSS基础

最新推荐文章于 2024-10-01 23:54:35 发布

原创最新推荐文章于 2024-10-01 23:54:35 发布 · 518 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS的基本概念，包括外部样式、内部样式和行内样式的引入方式及其优先级。此外，还详细阐述了各种选择器的用法，如元素选择器、属性选择器、后代选择器、子元素选择器、ID选择器和类选择器等。

CSS基础

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSSdemo</title>
        <!--
        CSS引入方式：
            外部样式：通过link标签引入一个外部.css文件
            内部样式：直接在style标签中编写css代码
            行内样式：直接在标签中定义style属性
            
        优先级：
            行内样式 > ID选择器 > 类选择器（两个类名，则就近原则） > 元素选择器
        -->
        <!--
        Defines the relationship between the current document and another document. 
        rel: Defines the relationship of the linked document to the current document. 
        href: Specifies the location of the linked document 
        -->
        <link rel="stylesheet" href="css/cssdemo.css" />
        <!--
        Creates a style sheet within the document. 
        格式：
            选择器{
                属性名1:属性值2;
                属性名2:属性值2;
            }
            
            元素选择器
            元素名称{
                属性名1:属性值2;
                属性名2:属性值2;
            }
            
            元素选择器扩展：
            h1{
                color: red;
            }
            h2{
                color: red;
            }
            h3{
                color: red;
            }
            我们可以写成选择器分组格式,元素之间使用逗号分开：
            h1,h2,h3{
                color: red;
            }
            
            元素属性选择器（div中带有class属性的）
            div[class]{
                color: red;
            }
            或者更具体一些（div中带有class属性，值为aa的）
            div[class="aa"]{
                color: red;
            }
            或者包含多个属性时：
            div[align][class]{
                color: red;
            }
            
            后代选择器：（元素之间使用空格分开，会选择匹配的子子孙孙）
            div tr{
                color: red;
            }
            子元素选择器：（中间使用 > 分隔，只会匹配儿子）
            div > tr{
                color: red;
            }
            
            ID选择器，id在整个页面中必须是唯一的。
            #ID{
                属性名1:属性值2;
                属性名2:属性值2;
            }
            类选择器
            .类的名称{
                属性名1:属性值2;
                属性名2:属性值2;
            }
            
        style:
            float:
                Elements which have the style float are floated horizontally. 
                These elements can move as far to the left or right of the containing element. 
                All elements after the floating element will flow around it, but elements before the floating element are not impacted. 
                If several floating elements are placed after each other, they will float next to each other as long as there is room.
                不再占有正常文档流中的空间，流式布局；
            clear：
                Specifies whether the object allows floating objects on its left side, right side, or both, 
                so that the next text displays past the floating objects. 
                清除浮动。
            position: Specifies how the element is positioned relative to the page or other elements. 
                绝对位置。
                top:his property specifies how far an absolutely positioned box's top margin edge is offset below the top edge of the box's 
                    containing block. For relatively positioned boxes, the offset is with respect to the top edges of the box 
                    itself (i.e., the box is given a position in the normal flow, then offset from that position according to these properties). 
                left:Specifies the x-coordinate for the position of the element relative to the left edge of the parent element or browser window. 
        -->
        <style type="text/css">
            div{
                color: red;
                font-size: large;
            }
            
            #span1{
                color: aquamarine;
            }
            #span2{
                color: antiquewhite;
            }
            #span3{
                color: aqua;
            }
            
            .aa{
                color: blue;
            }
            .bb{
                color: chartreuse;
            }
        </style>
	</head>
	<body>
        <!--
        Span element used to surround content blocks for formatting. 
        行内元素，不会自动换行。
        -->
        <span id="span1">我是span1</span>
        <span id="span2" style="color: coral;font-size: larger;">我是span2</span>
        <span id="span3">我是span3</span>
        <span id="span4">我是span4</span>
        <!--
        Defines a special block of content within a document. 
        块级元素。
        class: CSS class assigned to the element. 
        
        -->
        <div>我是div1。</div>
        <div>我是div2。</div>
        <div>我是div3。</div>
        
        <div class="aa">我是div4</div>
        <div class="aa">我是div5</div>
        <div class="bb">我是div6</div>
        <div class="bb">我是div7</div>
	</body>
</html>

css/cssdemo.css

#span4{
    color: #0000FF;
    font-size: larger;
}