CSS介绍

Oʀɪɢɪɴᴀʟ .822

已于 2023-10-08 19:16:44 修改

阅读量79

点赞数

文章标签： css

于 2023-10-08 19:03:19 首次发布

本文链接：https://blog.csdn.net/weixin_70374250/article/details/133686807

版权

介绍

CSS是Cascading Style Sheets的英文缩写,即层叠样式表
Html【Hyper Text Markup Language】
CSS语言是一种标记语言,因此不需要编译,可以直接由浏览器执行(属于浏览器解释型语言).
CSS是用于布局与美化网页的
CSS能实现内容与样式的分离，方便团队开发
CSS是由W3C的CSS工作组产生和维护的
- 1996年W3C正式推出了CSS1
- 1998年W3C正式推出了CSS2
- 2007年W3C正式推出了CSS2.1
- 2011年W3C正式推出了CSS3,目前仍在持续完善中

CSS语法

CSS 由选择器、属性、属性值组成

选择器{

样式属性名1：样式属性值1;

样式属性名2：样式属性值2;

.....

}

选择器通常是指需要改变样式的 HTML 元素属性是指希望设置的样式属性 CSS是大小写不敏感的,在CSS语法中推荐使用小写

body{color:red；font-size:20px}

CSS注释

如:

div{
     /* 设置宽度为200px*/
     width:200px;
}

CSS中的颜色值

十六进制表示方式 #rrggbb 如:#ffcc00 十六进制 0-F

简单十六进制表示方式；#rgb 如:#fc0

rgba表示方式； rgba(x,x,x,a) 其中x是一个0-255的整数值如:rgb(255,204,0,)

百分比实现rgb形式；rgb(x%,x%,x%) 其中x是一个0-100的整数值如rgb(100%,80%,0%)

颜色英文单词表示方式如:red

CSS长度单位

相对长度单位：

px 像素（Pixel）

% 百分比

em : Element meter 根据文档字体计算尺寸

rem :Root element meter 根据根文档（ body/html ）字体计算尺寸

ex : 文档字符“x”的高度

ch : 文档数字“0”的的宽度

vh : View height 可视范围高度

vw : View width 可视范围宽度

绝对长度单位:

in英寸（Inch） pt 点（Point） cm 厘米（Centimeter） mm 毫米（Millimeter）

换算比例：1in = 2.54cm = 25.4 mm = 72pt

calc

calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度

calc()最大的好处就是用在流体布局上，可以通过calc()计算得到元素的宽度。

需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；

calc()函数使用标准的数学运算优先级规则；

calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度

案例:使用calc实现左侧固定，右侧自适应效果

```html
<style>
  *{
    margin: 0;
    padding: 0;
  }
  .box{
    overflow: hidden;
    background-color: antiquewhite;
  }
  .left{
    width: 200px;
    height: 200px;
    background-color: red;
    float: left;
  }
  .right{
    width: calc(100% - 200px);
    height: 300px;
    background-color: green;
    float: left;
  }
</style>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
```

html引入CSS的三种方法

1.行内样式(内联样式)

<h1 style="color:red">这是⾏内样式的使⽤⽅式</h1>

2.内嵌样式

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .text{
                color:red;
            } 
        </style>
    </head>
    <body>
        <h1 class="text">这是内部样式引⼊⽅式</h1>
    </body>
</html>

3.外部样式

通过 link 标签引⼊

<link rel="stylesheet" href="url"/>

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" href="./index.css">
    </head> 
    <body>
        <h1 class="text">外部样式</h1> 
    </body> 
</html>

通过@import引入

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
          @import url('../css/demo.css');
        </style>
    </head> 
    <body>
        <h1 class="text">外部样式</h1> 
    </body> 
</html>

在css文件中引入

@import url('../css/demo.css');
div{
  color:red;
}

注意：@import必须在css样式的第一行进行引入，否则不生效

选择器

标签选择器

选择器名称为html标签名称

p  { text-indent:3em; }  /*当中的选择器是p*/
h1{ color:red; }  /*当中的选择符h1*/

类选择器

选择器名称以 . 开始，后面再加上对应元素class属性值

<style>
  .dark-row{ background-color:#EAEAEA; }
</style>
<p class="dark-row">第一段</p>

ID选择器

选择器名称以#开始，后面再加上对应元素的id属性值将对应元素的id属性值设为id选择器名称

<style>
  #main{ text-indent:3em; }      /*ID名称main前加上一个#号*/
</style>
<p id="main">文本缩进3em</p>

通配所有元素

*{font-size:12px;color:#888}

分组选择器

h1, h2, p {
  text-align: center;
  color: red;
}

选择器的优先级

ID选择器 >类选择器>标签选择器>通配符选择器

派生选择器

后代选择器: 以空格分隔

子元素选择器: 以>分隔

相邻兄弟选择器:以+分隔

普通兄弟选择器:以~分隔

<style>
/*相邻兄弟选择器
选中和第一个元素相邻的第二个元素*/
p + b {
     color: red;
}
/*普通兄弟选择器
匹配和第一个元素后面的所有同级元素；*/
p ~ b {
    color: blue;
}
</style>
<ul class="wrapper">
   <li>1
       <b>这是粗体123</b>
       <p>这是一段段落</p>
       <span>12344555656</span>
       <b>这是粗体</b>
       <p>这是一段段落2</p>
   </li>
   <li>2
        <p>这是一段段落</p>
        <b>这是粗体</b>
        <b>这是粗体2</b>
    </li>
    <li>3</li>
</ul>

选择器的权重

最⾼权重

!important 的作用是提升优先级，换句话说。加了这句的样式的优先级是最高的（比内联样式的优先级还高)。当 !important 规则被应⽤在⼀个样式声明中时，该样式声明会覆盖CSS中任何其他的声明，⽆论它处在声明列表中的哪个位置。

css选择规则的权值不同时，权值高的选择器优先
css选择规则的权值相同时，后定义的选择器规则优先
css属性后面加 !important 时，无条件绝对优先

总体来说： !important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。

CSS三大特性

层叠性

所谓层叠性是指多种CSS样式的叠加
层叠性是浏览器处理冲突的⼀个能⼒,如果⼀个属性通过两个相同选择器设置到同⼀个元素上，那么这个时候⼀个属性就会将另⼀个属性层叠掉（覆盖）
样式不冲突，不会层叠
样式冲突；就会层叠；按照优先级，决定哪个样式⽣效

继承性

CSS 的继承特性指的是应⽤在⼀个标签上的⼀些 CSS 属性被传到其⼦标签上；就是被⼦标签继承
不是所有的样式都会被⼦标签继承，字体类font- ; ⽂本类 text- ；颜⾊color ；⾏⾼line-height 等可以被继承
a标签⽐较特殊，没有办法通过继承改变a标签的字体颜⾊

优先级

权重的优先级，决定哪个样式最终⽣效
权重相同：后者⽣效；权重不同：权重⾼者⽣效

CSS字体样式

1.CSS字体

1.1字体样式

font-style 设置字体样式

normal：指定⽂本字体样式为正常的字体
italic：指定⽂本字体样式为斜体。

```css
.normal {
    font-style:normal
}
.italic {
    font-style:italic
}
```

1.2 文本字体

font-family 属性设置⽂本的字体 font-family 属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下⼀种字体

p {
    font-family:"Times New Roman", Times, serif;
}

1.3 字体粗细

font-weight：定义字体粗细

normal：正常的字体。相当于number为400
bold：粗体。相当于number为700
bolder：特粗体。也相当于strong和b标签的作⽤
lighter：细体
：⽤数字表示⽂本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

p.normal {
    font-weight: normal;
}
p.thick {
    font-weight: bold;
}
p.thicker {
    font-weight: 400;
}

1.4 字体大小

font-size：

font-size：定义字体⼤⼩

把字体的尺⼨设置为不同的尺⼨。可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
相对于⽗对像中字体尺⼨进⾏相对调节。使⽤成⽐例的em单位计算。可选参数值：smaller | larger
⽤数值指定⽂字⼤⼩。不允许负值
⽤百分⽐指定⽂字⼤⼩。其百分⽐取值是基于⽗对象中字体的尺⼨。不允许负值

/* 设定段落⽂字⼤⼩为⾮常⼤ */
p { font-size: xx-large }
/* 设定⼀级标题的⽂字⼤⼩为2.5倍⼤⼩ */
h1 { font-size: 250% }
/* 设定span⾥的⽂字⼤⼩为16px */ 
span { font-size: 16px; } 
.larger { font-size: larger; }
.point { font-size: 24em; } 
.percent { font-size: 200%;}

1.5 字体行高

line-height：设置行高

normal：默认值。
：⽤⻓度值指定⾏⾼。可以为负值。
：⽤百分⽐指定⾏⾼，其百分⽐取值是基于字体的⾼度尺⼨。可以为负值。
：设置数字，此数字是当前的字体⼤⼩的倍数。

p {
    line-height: normal;
}
p {
    line-height: 35px;
}
p {
    line-height: 3em;
}
p {
    line-height: 34%;
}

1.6 综合设置

CSS字体属性font定义字体，加粗，⼤⼩，⽂字样式。该属性是复合属性

```css
font：<font-style> <font-weight> <font-size>/<line-height> <fon-family>
p {
    font:20px/1.5 '微软雅⿊'
}
p {
    font:bold 20px/30px '微软雅⿊'
}
```

2 引入外部字体

<style type="text/css">
/* 第一步： 声明一个字体 */
@font-face {
    font-family: my-font;/*自定义名称*/
    src: url('时尚中黑简体.ttf');
}
@font-face {
    font-family: my-font2;
    src: url('迷你简双线体.ttf');
}
/* 第二步： 使用字体 */
p {
    font:50px my-font,sans-serif;
}
div {
    font:50px my-font2,sans-serif;
}
</style>
<p>
  这是一个段落标签
</p>

<style>
        @font-face{
            font-family: feng;
            src: url('./font/hongleizhuoshujianti.ttf');
        }
        p{
            font: 100px feng;
        }
    </style>
</head>
<body>
    <p>站长字体站长字体站长字体站长字体站长字体站长字体</p>
</body>

Oʀɪɢɪɴᴀʟ .822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS介绍

important > 行间样式 > id选择器 > class选择器||属性选择器 > 标签选择器 > 通配符选择器注意：减少选择器的个数：“在css规则中尽可能的使用较少的选择器”。calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。calc：calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。
复制链接

扫一扫