DMOZ中文网站分类目录-免费收录各类优秀网站的中文网站目录.
  • DmozDir.org
DMOZ目录快速登录入口-免费收录各类优秀网站的中文网站目录.由人工编辑,并提供网站分类目录检索及地区分类目录检索,是站长免费推广网站的有力平台!

CSS(1)基础语法、常见属性

  • CSS(1)基础语法、常见属性

  • 已被浏览: 58 次2021年05月28日    来源:  https://www.cnblogs.com/imomei/p/14753851.html
  • CSS:层叠样式表。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。CSS语法:CSS实例由选择器,以及一条或多条声明(属性)两部分组成。每个声明(属性)可以
    CSS
    • CSS:层叠样式表。主要用于设置HTML页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、边距等)以及版面的布局等外观显示样式。
    • CSS语法:CSS实例由选择器,以及一条或多条声明(属性)两部分组成。每个声明(属性)可以有一个或多个值。属性和值被冒号分开。CSS声明以分号;结束,声明以大括号{}括起来。
    p {
        color: red;
    }
    • CSS注释:CSS中仅支持使用/*  */进行注释
    /* 我是注释内容 */
    • CSS引入:引入CSS样式表的方法有三种。外部样式表、内部样式表、内联样式。
    <head>
        <!-- 
            引入外部样式文件(推荐):<link>标签在写在<head>标签内。外部样式表文件不能包含任何的HTML标签。样式表应该以.css扩展名进行保存。
                href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
                type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
                rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
        -->
        <link type="text/css" rel="styleSheet" href="./study.css" />
    </head>
    
    <body>
        <!-- 行内样式:语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。 -->
        <div style="font-style:italic; color:blue;"> Hello there</div>
        <div class="a"> Hello A</div>
        <!-- 内部样式:语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。 -->
        <style>
            .a {
                color: red;
            }
        </style>
    </body>
    CSS选择器
    • CSS选择器(一):用于选取页面上的某个标签,在CSS中称为选择器。
    1. 通配符选择器:通配符选择器是以*选取所有标签。
    2. 标签选择器:直接使用标签名选取该标签名的所有标签。
    3. id选择器:id选择器可以选取到标有该id属性的HTML标签。id选择器以"#"来定义。一个元素只能有一个ID
    4. 类选择器:类选择器可以选取到标有该class属性的HTML标签。类选择器以"."来定义。class选择器有别于id选择器,class属性可以在多个标签中使用。也支持一个标签中有多个class属性值(用空格隔开)。
    <!-- 类可以在同个标签上有多个值 -->
    <div class="a b c"> Hello A</div>
    <!-- 类可以在多个标签上使用 -->
    <div class="a b"> Hello B</div>
    /* 通配符选择器 */
    * {
        color: gray;
    }
    
    /* id选择器 */
    #china {
        color: red;
    }
    
    /* 类选择器 */
    .america {
        color: green;
    }
    
    /* 标签选择器 */
    li {
        color: yellow;
    }
    • CSS选择器(二):
    1. 后台选择器:两个元素用空格隔开,并且选中的是元素1所有层级的后代
    2. 子代选择器:只能选择子元素
    3. 并集选择器:并集选择器中间用逗号隔开,支持任意其他选择器,多个元素要求竖着写
    4. 伪类选择器:伪类选择器表示的是同一个标签,根据其不同的种状态,有不同的样式。例如<a>标签有点击前和点击后两种状态。
    <body>
        <ol class="haha">
            <li>1</li>
            <li>
                <p>我是儿子</p>
            </li>
            <li>3</li>
            <p>我是孙子</p>
        </ol>
        <div>熊大</div>
        <p>熊二</p>
        <span>光头强</span>
        <a href="http://www.baidu.com">百度一下</a>
        <input>
    </body>
    <style>
        /* 后台选择器:两个元素用空格隔开,并且选中的是元素1所有层级的后代 */
        .haha p {
            color: green;
        }
        /* 子代选择器:只能选择子元素 */
        .haha>p {
            color: red;
        }
        /* 并集选择器:并集选择器中间用逗号隔开,支持任意其他选择器,尽量竖着写 */
        div,
        p,
        .haha>a {
            color: pink;
        }
        /* 伪类选择器:伪类选择器表示的是同一个标签,根据其不同的种状态,有不同的样式。例如<a>标签有点击前和点击后两种状态。注意:一定先写静态伪类,后写动态伪类。
            1.静态伪类:只能用于超链接的样式。
                :link。超链接点击之前(主要是能区分是不是带有href的<a>标签)
                :visited。链接被访问过之后
            2.动态伪类:针对所有标签都适用的样式。
                :hover。悬停,鼠标放到标签上的时候
                :active。激活,鼠标点击标签,但是不松手时。
                :focus。是某个标签获得焦点时的样式(一般用于输入框获得焦点)
        */
        /* 让超链接点击之前 */
        a:link {
            color: red;
        }
        /* 让超链接点击之后 */
        a:visited {
            color: orange;
        }
        /* 鼠标悬停,放到标签上的时候 */
        a:hover {
            color: green;
        }
        /* 鼠标点击链接,但是不松手的时候(激活) */
        a:active {
            color: black;
        }
        /* 输入框获取焦点时 */
        input:focus {
            background-color: palegoldenrod;
        }
     CSS常用属性
    • CSS度量单位:
    单位名称说明例子
    Piexels(像素) 一个像素的大小根据用户显示器尺寸和像素密度不同而设定 .classname { margin:5px; }
    Points(磅) 一英镑等于一英寸的1/72,来源于印刷背景设计。 .classname { margin:5pt; }
    Inches(英寸) 1英寸相当于72英镑 .classname { margin:5in; }
    Centimeters(厘米) 1厘米比28英镑稍大一些 .classname { margin:5cm; }
    Millimeters(毫米) 1毫米等于1/10厘米(约为3磅) .classname { margin:5mm; }
    Picas Picas是另一种印刷度量单位,等于12磅 .classname { margin:5pc; }
    Ems 一个em等于当前字体的大小,用于描述相对尺寸 .classname { margin:5em; }
    Exs 也与当前字体大小有关,等于小写字母x的高度,不常用 .classname { margin:5ex; }
    Percent(百分比) 这个单位与em相关,它是相对单位 .classname { margin:125%; }
    • 字体相关属性:可以用CSS设置的四种主要的字体属性:family(字体族)、style(样式)、size(大小)和weight(粗细)。字体一般直接设置在body上用于控制整个页面。
    1. font-family:设置文本的字体
    2. font-size:设置文本的字体大小
    3. font-style:设置文本的字体样式(正常normal、斜体italic、倾斜oblique)
    4. font-weight:设置文本的字体粗细
    <style>
        div {
            height: 50px;
            width: 50px;
        }
        #cqz {
            /* 设置文本的字体系列:楷体、宋体等(不推荐汉字,推荐使用英文)。可以设置多个,当前一个浏览器不支持的时候,用第二个,以此类推 */
            font-family: "楷体";
            /* 设置文本的字体大小:可以使用px、em、百分比。不同浏览器字体默认大小不同,所以必须设定文字默认值。h1等标题标签需要单独指定字体大小。 */
            font-size: 16px;
            /* 设置文本为斜体:默认normal是正常字体 */
            font-style: italic;
            /* 设置文本粗细:主要是normal和bold这两个值。blod为加粗。或者可以使用数字(注意不要有单位) */
            font-weight: 700;
         /* 复合写法:前两个可以省略,后两个不能省略。 */
         font: font-style font-weight font-size font-family;
        }
    </style>
    <body>
        <div id="cqz"></div>
    </body>
    • 文本相关属性:
    1. color:文本颜色。
    2. text-align:设置文本的水平对齐方式。左对齐(left)、右对齐(right)、居中(center)和两端对齐(justify)。
    3. line-height:设置文本垂直的对齐方式(行高)【实现原理:行高由文字高度 + 上下空隙组成,当父类有高度,则会自动填满上下空隙,保证文字居中。】
    4. word-spacing:设置文本字间距
    5. letter-spacing:设置单词和字符间距
    6. text-transform:设置文本转换。无、首写字母大写、大写和小写。
    7. text-decoration:设置文本装饰。下划线、删除线、上划线、闪烁等。
    8. text-indent:设置首行文本缩进距离。
    #cqz {
        /* 设置文本颜色(具体设置方式见下文CSS中颜色定义) */
        color: #00f0ff;
        /* 设置文本水平对齐方式:左对齐(left)、右对齐(right)、居中(center)和两端对齐(justify)。 */
        text-align: center;
        /* 设置文本垂直对齐方式(设置行高,当行高与父容器的高度相同时且文字仅有一行,则文本垂直居中) */
        line-height: 100px;
        /* 设置文本装饰:下划线(underline)、删除线(line-through)、上划线(overline)、闪烁(blink)等。注意:<a>标签默认值为underline,想要去除<a>标签的下划线,就将text-decoration设置为none */
        text-decoration: line-through;
        /* 设置文本缩进:一般设置为em,代表当前文字大小的距离,是一个相对单位 */
        text-indent: 2em;
    
    }
    a {
        /* 去除<a>标签的默认下划线 */
        text-decoration: none;
    }
    • CSS中颜色定义:W3C标准化组织定义的标准的16中颜色的名称分别是:aqua(水蓝)、black(黑)、blue(蓝)、fuchsia(紫红)、gray(灰)、green(绿)、lime(绿黄)、maroon(酱紫)、navy(深蓝)、olive(橄榄绿)、ourple(紫)、red(红)、silver(银)、teal(青)、white(白)、和yellow(黄)。还可以使用十六进制RGB:#ff0000、#00ff00、#0000ff等。还可以使用rgb函数【rgb(0,255,255)】
    #cqz {
        /* RGB函数 */
        color: rgb(0, 255, 255);
        /* 十六进制RGB */
        color: #fff000;
        /* W3C标准色 */
        color: red;
    }
    • 背景属性:
    1. background-color:设置背景颜色
    2. background-image:设置背景图片
    3. background-repeat:设置背景图片重复/平铺方式
    4. background-position:设置背景图片定位
    5. background-attachment:设置背景图片是否固定或者随着页面的其余部分滚动
    6. background-size:设置背景图片大小【CSS3以前,背景图像大小由图像的实际大小决定】
    7. background:复合写法。任意属性都可以省略。
    <body>
        <div class="cqz"></div>
    </body>
      <style>
        * {
            margin: 0;
            padding: 0;
        }
        .cqz {
            margin-top: 50px;
            margin-left: 50px;
            height: 1000px;
            width: 1000px;
            border: 1px solid red;
            /* 设置背景颜色 */
            background-color: rgb(0, 0, 0);
            /* 设置背景图片:默认重复铺满盒子 */
            background-image: url("../images/123.webp");
            /* 设置背景图片重复平铺方式:
                1.repeat        垂直方向和水平方向重复。【默认】
                2.repeat-x    水平方向重复。
                3.repeat-y    垂直方向重复。
                4.no-repeat    背景图像将仅显示一次(不重复)。
            */
            background-repeat: no-repeat;
            /* 设置背景图片定位:一般建议小图标和超大图片使用背景进行设置而不是<img>
                1.需要有两个值。
                2.如果仅规定了一个关键词,那么第二个值将是center。
                3.方位名词:    top left center right(方位名词不区分设置顺序)
                4.像素/百分比: 设置像素值时,第一个值是x轴,第二个值是y轴。
            */
            /* background-position: center top; */
            background-position: 50% 100%;
            /* 设置背景图片大小:如果设置了图片大小,图片会被自动拉伸或压缩到设置的大小。 */
            background-size: 1000px 1000px;
            /* 设置背景图片是否固定或者随着页面的其余部分滚动
                1.scroll    默认值。背景图像会随着页面其余部分的滚动而移动。
                2.fixed        当页面的其余部分滚动时,背景图像不会移动。
            */
            background-attachment: fixed;
            /* 复合写法:支持省略任意属性 */
            /* background: #00FF00 url(bgimage.gif) no-repeat fixed top; */
        }
    </style>
    元素显示模式
    • 元素显示模式:在CSS中,根据元素显示模式的不同元素标签被分为了两类。行内元素(inline-level)、块级元素(block-level)。
    1. 行内元素:行内元素就是不会独占一行的元素,行内元素不能设置宽度和高度。它的宽度和高度会随着文本的改变而该改变。内部不能填写块级元素。例如:<span> <buis> <strong> <em> <ins> <del>等;
    2. 块级元素:块级元素就是会独占一行的元素,块级元素可以设置宽度和高度,如果没有设置宽度和高度,默认父元素一样宽,高度则为0。例如:<p> <div> <h> <ul> <ol> <dl> <li> <dt> <dd>等。
    3. 行内块级元素:由于我们有的时候不仅要设置元素的宽度和高度,同时也希望元素不会独占一行,这时就出现了行内块级元素(inline-block)。同一行的行内块级元素会有空白间隔。例如<img><input><td>等。
    • 转换CSS元素的显示模式:设置元素的display属性。inline(行内)、block(块级)、inline-block(行内块级)
    <body>
        <span>我是行内元素,被转换成了块级元素</span>
        <div>我是块级元素,被转换成了行内元素</div>
        <img src="../images/1.webp"><img src="../images/1.webp">
    </body>
      <style>
        * {
            margin: 0;
            padding: 0;
        }
    
        /* 将span转换为块级元素 */
        span {
            display: block;
            background-color: red;
            width: 400px;
            height: 200px;
        }
    
        /* 将div转换为行内块级元素 */
        div {
            display: inline-block;
            background-color: green;
            width: 300px;
            height: 300px;
        }
    
        /* 将img转换为块级元素 */
        img {
            display: block;
            width: 200px;
        }
    </style>
    CSS三大特性
    • CSS三大特性:CSS的三个特性是指层叠性、继承性以及优先级。
    1. 层叠性:层叠性是在HTML中对于同一个元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些样式书写的先后顺序来决定,处于最后面的CSS样式将会覆盖前面的CSS样式。
    2. 继承性:子标签会继承父标签的某些样式,如文本颜色和字号。想要设置一个可继承的属性,只需将它应用于父元素即可。合理使用继承可以简化代码,降低CSS样式的复杂性。对于字体、字号、颜色、行距等文本类属性具有继承性,都可以在body中统一设置,然后影响文档中所有文本。但是,并不是所有的CSS属性都可以继承,如边框、外边距、内边距、背景、定位、元素高度等与块级元素相关的属性都不具有继承性
    3. 优先级:在复杂CSS样式表,经常出现两个或多个不同样式规则应用在同一元素上,这时到底采用哪个样式呢?这就是典型的CSS优先级问题。计算优先级有如下规则:继承 < 元素选择器 < 类选择器/伪类选择器 < ID选择器 < 行内样式 < !important
      1. 继承样式的权重为0:在嵌套结构中,无论父元素样式权重多大,子元素继承时,应用在子元素上的权重都为0,即子元素定义的样式会覆盖所有继承来的样式。
      2. 行内样式优先:应用style属性的元素,其行内样式的权重非常高,可以理解为远大于100。总之,他拥有比上面提高的选择器都大的优先级。
      3. 就近原则:权重相同时,CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级,或者说排在最后的样式优先级最大。
      4. !important命令:CSS定义了一个!important命令,该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近,!important都具有最大优先级。
      5. 权重会叠加,但是永远不会进位。(下面讲解权重叠加问题)
    <style>
    div {
        height: 100px;
        /* 层叠性:该属性会被同权重CSS覆盖 */
        width: 50px;
        margin-left: 50px;
        border: black 1px solid;
        /* 继承性:该属性会被子标签继承 */
        font-size: 20px;
        /* 继承性:该属性会被子标签覆盖 */
        font-family: "楷体";
    }
    div {
        /* 层叠性:该属性会覆盖上方的同权重CSS */
        width: 60px;
    }
    p {
        font-family: "微软雅黑";
    }
    </style>
    <body>
        <div>
            <p>曹老三</p>
        </div>
    </body>
    • 权重叠加问题:每种选择器的权重见下方表格。样式继承的权重为0,复合选择器使权重叠加,权重之间不能越界,11个类也没有id的权重大
    选择器 权重
    0000 0000
    标签选择器 0001
    类选择器与伪类选择器 0010
    ID选择器 0100
    行内样式 1000
    !important   +∞
    <body>
        <div class="father" id="fatherid">
            <div class="child1" id="child1Id">孩子1</div>
        </div>
    </body>
      <style>
        * {
            margin: 0;
            padding: 0;
            /* 权重为0 */
            background-color: pink;
        }
    
        .child1 {
            /* 权重为0010 */
            background-color: red;
        }
    
        .father .child1 {
            /* 权重为0020 */
            background-color: black;
        }
    
        #fatherid .child1 {
            /* 权重为0110 */
            background-color: green;
        }
    
        #child1Id {
            /* 权重为0100 */
            background-color: wheat;
        }
    
        #fatherid #child1Id {
            /* 权重为0200 */
            background-color: greenyellow;
        }
    
        .child1 {
            /* 权重为+∞ */
            background-color: hotpink !important;
        }
    </style>

     


    以上信息来源于网络,如有侵权,请联系站长删除。

    TAG:语法 属性 常见 基础 CSS

  • 上一篇:Spring Cloud 升级之路
  • 与“CSS(1)基础语法、常见属性”相关的资讯
  • 『无为则无心』Python基础 — 11、Python中的数据类型转换
  • 合肥某小公司面试题:Spring基础
  • 音视频点播服务基础系列(FFmpeg常用命令)
  • 『无为则无心』Python基础 — 4、Python代码常用调试工具
  • css--常见左右盒子宽度高度自适应布局