CSS-选择器/字体属性/文本属性/引入方式

最新推荐文章于 2024-05-18 10:10:39 发布

杨蛋蛋~R

最新推荐文章于 2024-05-18 10:10:39 发布

阅读量252

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/weixin_50119334/article/details/108586353

版权

CSS简介

CSS:层叠样式表，也是一种标记语言，用于美化网页。
最大价值：让结构(html)和样式（CSS）相分离
CSS语法规范：由选择器以及一条或多条声明组成

<style>
        /*选择器 {样式}*/
        /*给谁改样式{改什么样式}*/
        p{
            color: red;
            font-size: 12px;
        }
    </style>

属性与属性值间以键值对形式出现，并用：分隔开，键值对末尾要加；且用小写字母
冒号后面保留一个空格，选择器和大括号间也要保留空格

CSS选择器作用

选择器就是用于选择标签用的
选择器分为：基础选择器和复合选择器
基础选择器分为：标签选择器，类选择器，id选择器，通配符选择器

标签选择器

即html标签名作为选择器,按标签名称分类，为页面中某一类标签指定统一的CSS样式，比如所有的p标签或所有的div标签

/*标签选择器：写上标签名*/
p{
            color: red;
            font-size: 12px;
        }

类选择器(最常用）

若想要差异化选择不同的标签，单独选一个或某几个标签，可以选择类选择器
结构需要用class属性来调用class类的意思

.类名{
        属性1：属性值1；
        .........
        }
<style>        
   .red{
         color: blue;
         }
</style>       
<body>
    <p class="red">
        感谢您
    </p>
</body>

类名是自己起名字的，但不可用标签名命名，前面一定要加.（点符号）
也可以给一个类取多个样式：

<div class="类1 类2>//类间中间必须用空格分隔开

id选择器

用#定义
与类选择器使用方式一致
id选择器：样式#定义，结构id调用，并且只能调用一次，别人不能再次调用
类选择器可以多次调用且可以调用多个
类选择器在修改样式中用的最多，id选择器一般用于页面唯一性的元素上，经常和javascript搭配使用。
语法：

#id名{
        属性1：属性值1；
        .....
        }

通配符选择器

用*定义，不需要调用，会自动给所有元素选择样式
特殊情况下才使用
语法：

   *{
     属性1：属性值1；
     }

CSS字体属性

font-famliy 字体标签
Microsoft YaHei(微软雅黑）
若有多个字体，需要用英文逗号分隔开来写
若遇到由多个单词组成的字体，需要用单引号将其引起来，例：‘Microsoft YaHei’
一般在使用时定义为body标签
尽量使用系统默认字体，保证兼容性

      p{
         font-family:inherit，'Microsoft YaHei';
        }

      body{
           font-family:inherit，'Microsoft YaHei';
           }

font-size 字体大小标签

font-size: 16px;

一定要加 px

font-weight 字体粗细标签
font-weight:bold;(粗体）
（实际开发中，提倡用数字使字体加粗或者变细 400-700）
若想让加粗的字体不加粗（例如h stong等），只需让 font-weight属性值为normal 或 400即可

font-style 字体样式标签
属性值：normal（正常） / intalic（斜体）
若要让倾斜的字体（如 em标签内文字）不倾斜，只需让font-style属性值为normal

//使用多个font属性时，必须按照一定顺序，不可颠倒，并且各个属性间用空格隔开
顺序如下：
font-style
font-weight
font-size / line-height
font-family
(不需要设置的属性可以省略（取默认值），但必须保留font-size 和 font-family 属性，否则font属性将不起作用）

CSS文本样式

div{
        color: pink; 
       /*color用于定义文本的颜色，属性值有三种形式：预定义的颜色值：blue等；十六进制：#00FF00等；RGB代码：rgb(255,0,0)等*/
       /*常用的是十六进制*/
       text-align: center;
       /*用于设置文本对齐方式，只能设置水平方向的对齐方式 left right center*/
       text-decoration: underline;
       /*用于装饰文本，给文本添加线：underline（下划线） overline(上划线） none(无）line-through(删除线) */
       /*text-decoration:none 常用于删除下划线，一般用于取消链接中的下划线*/
       text-indent:20px ;
       /*用于指定文本第一行的缩进，常用于段落的缩进 （注意，只缩进首行）*/
       /*也可用 em 单位（相对大小），一个em是一个当前文字的大小*/
       line-height:16px;
       /*用于设置文本的行间距，可以控制文本行与行之间的距离*/
       /*数值包括文本的高度和上间距，下间距的高度，即：数值=文本告+上间距+下间距*/
    }

CSS引入方式

CSS的三种样式表：
（1）行内样式表（行内式）
（2）内部样式表（嵌入式）
（3）外部样式表（链接式）

内部样式表：

即在html页面内，将所有CSS样式抽取出，放到style标签中，理论上可以放到任何地方，但一般放于文档的head标签内。
此种方式可以方便地控制当前整个页面中的样式设置
代码结构清晰，但并没有做到结构与样式完全分离
又称为嵌入式引用

行内样式表：
在元素标签内部的style属性中设定CSS样式，适用于修改简单样式

<div style ="color: lightblue; font-size:12px;">样式</div>

style就是标签的属性
在双引号中间
可以控制当前的标签设置样式
书写繁琐，只适用于结构简单，样式少的场合

、外部样式表：
开发中最常用,可控制多个页面

单独建立CSS页面，之后把CSS文件导入到HTML页面中使用

新建一个后缀名为.css的样式文件，把所有的CSS代码都放入此文件中
在HTML页面中，使用标签引入这个文件

<link rel="stylesheet" herf="css文件路径>

Tips:

/：根目录
../ : 父级目录
./: 当前目录

杨蛋蛋~R

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS-选择器/字体属性/文本属性/引入方式

CSS简介CSS:层叠样式表，也是一种标记语言，用于美化网页。最大价值：让结构(html)和样式（CSS）相分离CSS语法规范：由选择器以及一条或多条声明组成<style> /*选择器 {样式}*/ /*给谁改样式{改什么样式}*/ p{ color: red; font-size: 12px; } </style>属性与属性值间以键值对形式出现，并用
复制链接

扫一扫