CSS 基础选择器

最新推荐文章于 2022-12-02 14:44:44 发布

鲸渔要加油

最新推荐文章于 2022-12-02 14:44:44 发布

阅读量165

点赞数 1

分类专栏：基础学习文章标签： css html5 html css3 前端

本文链接：https://blog.csdn.net/qq_53283188/article/details/112724957

版权

基础学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的概念、作用及其实现方式，包括选择器的分类（基础选择器、复合选择器）和用法。重点讨论了字体属性和文本属性，如字体大小、颜色、对齐方式等。此外，还提到了CSS的引入方式，包括行内样式、内嵌样式和外部样式表。通过实例展示了如何使用CSS美化HTML页面。

摘要由CSDN通过智能技术生成

CSS

css概念

CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.
有时我们也会称之为 CSS 样式表或级联样式表。
CSS也是一种标记语言
css作用：美化页面，让html页面更漂亮，让页面布局更简单，结构样式相分离
CSS的实现：宽高，边框，颜色，位置，字体，图片等.

css语法规范

CSS 规则由两个主要的部分构成：选择器以及一条或多条声明.
CSS必须作用在HTML上才会有效，不能单独运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css语法体验</title>
    <style>
         /* 语法规范：
        选择器名称空格{
            属性:属性值;
            属性:属性值;
        } */
        p {
            /* 设置字体颜色 */
            color: red;
            /* 设置字体大小 */
            font-size: 25px;
        }
    </style>
</head>
<body>
    <p>昨晚熬夜太晚，手机突发发错震动的声音,打开一开是一位小姐姐对我说，明天约你看电影，来吗</p>
</body>
</html>

CSS样式都包含在一般写到标签里面，在style标签里面书写样式。

1.选择器

选择器分类

基础选择器：标签选择器；类选择器；ID选择器；通配符选择器
复合选择器：后代选择器；子选择器；并集选择器；伪类选择器

1.1 基本选择器

标签选择器：就是通过标签名字来找元素

语法：
    <style>
        /* 
            标签名 {
                属性:属性值;
            }
         */
         p {
             color: green;
         }
         div {
             color: hotpink;
         }
    </style>

作用：给页面上面指定的标签设置样式 .
缺点：如果大量使用标签选择器，那么页面上很多的元素就会是同一效果，不能差异化设置.

1.2类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            .类名 {
                属性:属性值;
            }
         */

        .box{
            color: red;
        }
        /* 记忆口诀：样式点定义，结构类调用。实际开发中用的比较多 */
    </style>
</head>
<body>
   <p class="box">这是红色</p>
   <div class="box">我也想变成红色</div>  
</body>
</html>

命名规范

不能是中文
不能是标签名字 div span a等，因为有标签选择器
不能是点+数字

多类名使用
每一个标签都有class的属性，它的属性值我们通常称为类名 class属性的值有多个每一个类名需要使用空格分隔.
<div class="类名1 类名2 类名3 类名N"></div>
注意点：如果多个类名同时作用于一个标签，并且样式是设置一样的，要观察css代码的书写顺序，写在后面会把写在前面的样式给覆盖掉.

1.3 id选择器（了解即可）

HTML元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以“#" 来定义id选择器能保证该名字唯一，常用在JS中实现.

注意：在一个网页中不能出现两个名字相同的id，不能多次使用，类选择器可以一次定义多次使用.

1.4通配符选择器

在 CSS 中，通配符选择器使用*定义，它表示选取页面中所有元素（标签）

2.字体属性

字体属性:用于定义字体系列、大小、粗细、和文字样式（如斜体）

font-family：字体类型设置字体类型，网页中常用的字体类型有宋体微软雅黑黑体等.

font-size: 字体大小设置文字的大小的要加单位通常单位是px 一般是给body标签设置文字大小它可以控制这个网页里面所有的文字大小 .

font-weight：字体粗细设置字体是否加粗.取值为:400或者 normal 将加粗的文字设置为正常,700 或者 bold 将正常的文字设置为加粗的效果.

font-style：字体风格 设置字体风格，取值为：normal(不倾斜默认值) italic(倾斜)

字体复合写法

font: font-style font-weight font-size/line-height font-family
例如：
font: italic 700  30px '楷体';

说明：一次可以同时设置多个针对于字体的属性，每一个属性要用空格分隔.
注意事项：font-style与font-weight 可以省略不写 font-size与font-family 必须要写，否则font属性将不起作用.

line-height:行间距

3.文本属性

文本颜色：CSS Text（文本）属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等.

文本对齐
text-align：

left(左)
center(中)
right(右)
它只能将块元素里面的文字进行对齐，行内元素不行
扩充，想要将行内元素里面的内容进行水平对齐，需要将行内元素包裹到一个块元素里面，然后给块元素设置水平对齐方式就OK.

文本装饰属性
text-decoration：

none(清除修饰线)
underline 添加下划线
overline 添加上划线
line-through 添加删除线

文本缩进
text-indent：

26px
2em

行间距
line-height：

30px

4.css引入方式

1行内样式表（行内式）内部样式表（内嵌样式表）是写到html页面内部. 是将所有的 CSS 代码抽取出来，单独放到一个 <style> 标签中.
2. 内部样式表（嵌入式）行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式.
3. 外部样式表（链接式）
第一步：先要创建一个以xxxx.css为扩展名的文件
第二步：在对应的html文件中需要使用<link rel="stylesheet" href="要引入的css文件的路径">
优点：一个css文件可以被多个html文件所引用
特点：一个html文件可以使用link引入多个css文件

鲸渔要加油

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 基础选择器

CSScss概念CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.有时我们也会称之为 CSS 样式表或级联样式表。CSS也是一种标记语言css作用：美化页面，让html页面更漂亮，让页面布局更简单，结构样式相分离CSS的实现：宽高，边框，颜色，位置，字体，图片等.css语法规范CSS 规则由两个主要的部分构成：选择器以及一条或多条声明.CSS必须作用在HTML上才会有效，不能单独运行<!DOCTYPE html><html lang=
复制链接

扫一扫

专栏目录