CSS语法，文本

和蔼的阿木木o

已于 2022-07-05 09:44:23 修改

阅读量593

点赞数

分类专栏： html css 文章标签： css 前端 html

于 2022-06-21 20:59:25 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/125388347

版权

html 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

CSS解释

层叠样式表（Cascading Style Sheets）
优点
1.使HTML专注于网页的内容，CSS专注于网页的表现
2.提供了丰富的格式化功能
3.可以针对各种可视化浏览器（主要有显示器、打印机、PDA等）来设置不同的样式

CSS与浏览器
并不是所有的CSS的样式都被浏览器支持
不同的浏览器对CSS的实现有细微的不同，需要特别注意

行内样式

直接使用标记的style属性

style=" width:100px; height:100px; background-color:#F00;"

内嵌样式

在HTML中，使用<style></style>标记，将样式写在<style>标记内
注意：<style>标记要指定type属性为text/css

链接样式(外链式)

将CSS写入单独的一个文件中，注意该文件的文件扩展名为 .css
在HTML文档中使用<link>标记引入css文件
<link>标记需要指定两个属性：type和rel（relationship）

<link type="text/css" rel="stylesheet" href=“sy.css" />

使用导入样式

使用@import指令可以将css文件中的css样式导入到不同的地方
导入式的结果和直接书写是同样的效果
导入式可以共享样式代码
可以在内嵌式里使用导入，也可在css文件中使用

导入样式的使用方法

@import url(“sheet1.css”);
@import “sheet1.css”;

简明说一下 CSS link与@import的区别和用法?

两者的基本语法

link语法结构

<link href="外部CSS文件的URL路径" rel="stylesheet" type="text/css" />

link标签通过URL路径引入外部的CSS文件到HTML中，是一种HTML标签，属于书写HTML的语法，只能放在HTML源代码中使用。

@import语法结构

<style type="text/css">
@import + 空格 + url(外部CSS文件URL路径地址);
</style>

@import是在样式表定义中再引入外部的CSS文件，相当于一种样式，属于书写CSS的语法

两者的区别

两者都是外部引用CSS的方式，但是存在一定的区别。

区别1：link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

区别2：link引用CSS时，在页面载入时同时加载；@import需要页面完全载入后才加载。

区别3：link是XHTML标签，无兼容问题；@import是在CSS2.1中提出的，低版本的浏览器不支持。

区别4：link支持使用JavaScript控制DOM去改变样式；@import不支持这样的操作（JavaScript可以获取link标签元素，但获取不到@import，因为@import只是一种CSS语法）。

本质上，两者使用选择区别不大，但为了软件中编辑布局网页HTML代码，一般使用link较多，也推荐使用link。

多种方式引入CSS时，作用的优先级

基本原则：“最晚，优先级最高”
一般优先顺序是：行内，内嵌，链接

css选择器

CSS修饰html标签的基础就是选择符，即可以通过多种选择符来选择要修饰的html标签
通配选择器
     即所有的标签
     语法：*{规则}
     例：*{font-family:"宋体";}
类型（标记）选择器
     即使用标签的名字作为选择符
   语法：标签{规则}
     例：td{color:#F00;}

    <title>Document</title>
    <style type="text/css">
        p{
            width: 200px;
            background-color: red;
            color: blue;
        }
        div{
            background-color: aquamarine;
            width: 100px;
        }
        /* 选择器{
            样式属性名:属性值;
        } */
    </style>
</head>
<body>
    <p>
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis minus aut assumenda reprehenderit aliquid enim beatae inventore iste? Sit dolorum quaerat, expedita sint natus placeat ut impedit animi unde eaque?
    </p>
    <div>
        hello word!    选择器
    </div>
</body>

可通过浏览器F12检查，来快速设置

ID选择器

每个html标签的id都是不一样的
语法：#id{规则}

    <style>
        div{
            color: red;
        }
        #box{
            color: blue;
        }
        /* id选择器
        #id值{}    id值是唯一的 */

    </style>
</head>
<body>
    <div id="box">
        hello
    </div>
    <div>
        word
    </div>
</body>

类(class)选择器

语法：.className{规则}
注意：也可以在前面添加标签名字，如div.className（之间无空格，和包含选择符区分开）
可以为标签指定多个class值，多个值之间用空格隔开
例：<div class="dv top">

    <style>
        div{
            color: red;
        }
        #box{
            color: blue;
        }
                /* id选择器
        #id值{}    id值是唯一的 */
        .con{
            background-color: red;
        }
        /* 类选择器
        .类名{} */

    </style>
</head>
<body>
    <div id="box" class="con">
        hello
    </div>
    <p class="con">怪我怪我怪我</p>
    <div>
        word
    </div>
</body>

优先级

id选择器 > 类选择器 > 标签选择器

100 10 1

包含选择器后代选择器

通过标签的嵌套选择标签，只要包含就行
语法：选择符a 选择符b {规则}
选择符之间用空格隔开,即选择符a标签内的所有选择符b标签

    <style>

        div p{
            color: red;
        }
        .box p{
            color: blue;
        }
        .box .con{
            color: blueviolet;
        }
        /* 包含选择器
        选择器E 选择器F{} */
        /* 权重相加 */
    </style>
</head>
<body>
    <p> hello</p>
    <div>
        <p> word</p>
    </div>
    <div class="box">
        <p class="con">
            g耶比耶比耶
        </p>
    </div>
</body>

通配符选择器

使用通配符“*”，选择所有元素，并设置其背景颜色和文字样式：

<title>基础教程网(nhooo.com)</title>
<head>
<style>
*
{
background-color:green;
color:white;
}
</style>
</head>
<body>
<h1>欢迎来到基础教程网(www.nhooo.com)</h1>
<div class="content">
<p class="website">我们的网址是：www.nhooo.com.</p>
<p class="sitename">我们的网站名称是：基础教程网.</p>
</div>
<p>我们为您提供各种基础教程学，学好基础，你才能走的更远！</p>
</body>

选择<div>元素内的所有元素：

<title>基础教程网(nhooo.com)</title>
<head>
<style>
div *
{
background-color:green;
}
</style>
</head>
<body>
<h1>欢迎来到基础教程网(www.nhooo.com)</h1>
<div class="content">
<p class="website">我们的网址是：www.nhooo.com.</p>
<p class="sitename">我们的网站名称是：基础教程网.</p>
</div>
<p>我们为您提供各种基础教程学，学好基础，你才能走的更远！</p>
</body>

组合选择器

选择器1，选择器2，选择器n{

属性:值；

}

 
   .class01,#id01{
 
      color:blue;
 
      font-size:20px;
 
      border:1px yellow solid;
 
   }

伪类选择器

    <style>
        a:link{          /*给a加了一个伪类叫link*/
            color: aqua;     /*未访问的颜色*/
        }
        a:visited{
            color: blue;    /*访问后的颜色*/
        }
        a:hover{        /*鼠标悬停状态*/
            color: red;
        }
        a:active{       /*鼠标点击时状态*/
            color: yellow;
        }
        /* LOVE HAte  爱恨原则*/
        /*  LV HA  */
    </style>
</head>
<body>
    <a href="#">超链接</a>
</body>

伪类应用

    <style>
        a{
            text-decoration: none;
        }
        .nav{
            width: 500px;
            line-height: 50px;
            background-color: aqua;
            margin: 0 auto;       /*块元素水平居中*/
        }
        .nav a{
            color: coral;
            margin-left: 10px;      /*给a左侧添加外边距*/
            margin-right: 10px;
        }
        .nav a:hover{       /*光标在a上悬停时的颜色*/
            color: black;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="">天猫</a>
        <a href="">淘宝</a>
        <a href="">京东</a>
        <a href="">拼多多</a>
    </div>
</body>

直接选择子元素

如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。

例如，如果您希望选择只作为 h1 元素子元素的 strong 元素，可以这样写：

h1 > strong {color:red;}

这个规则会把第一个 h1 下面的两个 strong 元素变为红色，但是第二个 h1 中的 strong 不受影响：

<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>

px和em

px,像素
根据显示器分辨率的不同，像素的大小也是不同的
em,以当前字符的高度为基准
如果当前字体的高度为12px，那么1em就是12px
注意：一般以font-size为准，如果没有定义font-size，则以浏览器默认大小（16px）为准

网页中颜色采用RGB模式显示（显示器

RGB颜色在CSS中的表达方式
1.直接使用颜色的英文单词，如red
       注意：很多浏览器不支持颜色的单词表示
2.使用三色的数值，如rgb(120,222,100)
     注意：数值在0~255之间
      使用三色的百分比，如rgb(10%,20%,100%)
      red rgb(255,0,0)     blue rgb(0,0,255)   black rgb(0,0,0)
      green rgb(0,255,0) white rgb(255,255,255)
3.使用三色数值的十六进制，如#0000ff
     注意：推荐使用这种方式，十六进制值前加#
     rgb   red #ff0000   #f00   blue   #0000ff #00f black #000000 #000
     green   #00ff00 #0f0   white #ffffff #fff

CSS中字体相关样式

font-family
     指定字体
     可以为文字指定多个字体，不同字体间用“，”隔开
     字体名字中间有空格的，要用双引号引起来
font-size
     字体大小
     多用px/em单位
font-style
     字体倾斜效果
     normal不倾斜、oblique和italic倾斜
     Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！

font-weight

    字体粗细
    大多浏览器可以实现：正常和加粗效果

    <style>
        .box{
            background-color: aquamarine;
            line-height: 40px;
            height: 40px;
            /* line-height: ; 行高
            数值+单位
            数值   （无单位  font-size:倍数 */
          }
            简写
            font:normal bold 18px/2 "宋体"
            font: font-styly值 font-weight值 font-size值/line-height值 font-family值
    </style>
</head>
<body>
    <div class="box">
        中国
    </div>
</body>

text-transform
英文字母大小写转换

text-decoration
文本的装饰效果

<style>
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
</body>

/*关键值*/
text-decoration: none;                     /*没有文本装饰*/
text-decoration: underline red;            /*红色下划线*/
text-decoration: underline wavy red;       /*红色波浪形下划线*/
blink 	                                   定义闪烁的文本。
inherit 	      规定应该从父元素继承 text-decoration 属性的值。
text-decoration: underline overline dotted red;  红色虚线

solid	默认值。线条将显示为单线。
double	线条将显示为双线。
dotted	线条将显示为点状线。
dashed	线条将显示为虚线。
wavy	线条将显示为波浪线。
initial	设置该属性为它的默认值。请参阅 initial。
inherit	从父元素继承该属性。请参阅 inherit。

text-indent
       段落内容首行缩进（悬挂缩进）

       text-indent：2em;   首行缩进2字符

字词间距
    英文文本
letter-spacing 字母和字母间距 : normal / 数值
word-spacing 单词和单词间距
中文文本
letter-spacing 汉字和汉字之间的间距

overflow:visible（默认）/hidden（超出部分隐藏）/scroll（出现滚动条）/auto（浏览器自动处理）
内容溢出处理

text-overflow：clip（不显示省略标记，简单裁切） | ellipsis （文本溢出显示省略标记）文本溢出处理
white-space： normal / pre（空白被保留）/nowrap（不换行）/....
元素空白的处理

单行省略标记

    <style>
        .box{
            width: 400px;
            background-color: aqua;
            text-align: justify;
            white-space: nowrap;  /* 强制不换行 */
            overflow: hidden;    /* 溢出部分隐藏 */
            text-overflow: ellipsis; /*文本溢出显示省略标记 */
        }
    </style>
</head>
<body>
    <div>
        <p class="box">
            大多浏览器可以实现：正常和加粗效果Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolorum vel exercitationem, rem, minima quos laboriosam ipsum harum culpa sint inventore dolore, tenetur qui labore sed aut accusantium repellendus libero!labore Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam sit neque corporis quaerat saepe illum eligendi a ipsum impedit rerum, id tempore! Tenetur incidunt eveniet ipsam enim sunt laborum temporibus?
        </p>
    </div>

多行省略标记

    <style>
        .box{
            width: 400px;
            background-color: aqua;
            text-align: justify;
            overflow: hidden;        /*溢出部分隐藏*/
            display: -webkit-box;   /*弹性伸缩盒*/
            -webkit-line-clamp: 4;   /*省略标记出现的行数*/
            -webkit-box-orient: vertical;     /*子元素垂直排列*/
        }
    </style>
</head>
<body>
    <div>
        <p class="box">
            大多浏览器可以实现：正常和加粗效果Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto dolorum vel exercitationem, rem, minima quos laboriosam ipsum harum culpa sint inventore dolore, tenetur qui labore sed aut accusantium repellendus libero!labore Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam sit neque corporis quaerat saepe illum eligendi a ipsum impedit rerum, id tempore! Tenetur incidunt eveniet ipsam enim sunt laborum temporibus?
        </p>
    </div>
</body>

line-height

    段落内部的行高
注意：文字在每一行自动上下居中
text-align
       文本的水平位置
        left，左对齐（默认值）
        right,右对齐
        center,居中对齐
        justify,两端对齐
        justify对于主要用于英文
        只能对多行中的非最后一行进行两端对齐

text-indent：2em;   首行缩进2字符
vertical-align:baseline/top/text-top/middle/bottom/.. 垂直对齐方式
        该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。

行内块元素+vertical-align：middle 可以使文字和行内块元素水平方向对齐

html transition过渡属性

transition不能过渡display

“CSS的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。"
img{
            width: 15px;
            height: 250px;
            transition: 0.75s;
        }