CSS入门

最新推荐文章于 2024-08-06 19:06:59 发布

吾独矣

最新推荐文章于 2024-08-06 19:06:59 发布

阅读量123

点赞数 1

分类专栏：随笔文章标签： html

本文链接：https://blog.youkuaiyun.com/m0_56210400/article/details/121459452

版权

随笔专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS样式的三种应用方式：行内式、内嵌式和链入式，并探讨了基础选择器、字体样式选择器及文本外观属性的使用。通过实例代码展示了如何设置文本颜色、字号、字体、行距等，以及各种文本装饰和对齐方式。此外，还涵盖了CSS中的阴影效果和文本换行策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS样式
·行内式，通过style属性设置元素样式

 <标记名 style="属性1,属性2">文本</标记名>

·内嵌式，通过style属性代码集中写在文档的head标记中

<head>
     <style type="text/css">
           标记名{
                属性1;
                属性2;
            }
    </style>
 </head>

·链入式，将所有样式放在以.CSS为扩展名的外部样式表文件中，通过link 标记链接到html文档中

<link href="文件名.css" type="text/css" rel="stylesheet"/>
<!--type定义所链接文档类型，rel定义当前文档与被链接文档关系-->

CSS基础选择器
·标记选择器，对某一标记指定统一css样式

标记名{
    属性1: 属性值1;
    属性2: 属性值2;
}

·类选择器，定义class属性使用.进行标识后面跟类名

<标记名 class="自定义文本">文本</标记><!--html-->
.自定义文本{
    属性: 属性值1;
}<!--css-->

·id选择器，使用#进行标识，后面跟id名

<标记名 id="自定义文本">文本</标记><!--body-->
#自定义文本{属性: 属性值;}<!--<head>里<style>-->

·通配符选择器，用*号表示页面中所有元素

*{属性: 属性值;}

·标签指定选择器，由一个标记选择器和一个类选择器或者id选择器构成

<标记名 id/class="自定义文本">文本</标记><!--body-->
标记选择器.自定义文本{属性: 属性值;}<!--<head>里<style>-->

·后代选择器，标记嵌套，内层标记是外层标记后代

<外层标记>外层<内层标记>内层嵌套文本</内层标记>外层</外层标记><!--body-->
外层标记 内层标记{属性:属性值;}<!--<head>里<style>-->

·并集选择器，为不同标记定义相同css样式

标记1,标记2{属性: 属性值;}<!--<head>里<style>-->

字体样式选择器
·font-size:字号大小
·font-family:字体
·font-weight:字体粗细
·@font-face:自定义服务器字体

@font-face{
	font_family:字体名称;
	src:字体路径;
}

·word-wrap:实现长单词和URL地址自动换行

标记名{word-wrap:normal/break-word;}<!--<head>里<style>-->
<!--normal只在允许断字点换行，break-word在长单词或URL地址内部换行-->

文本外观属性
·color：文本颜色
·letter-spacing：字间距
·word-spacing：单词间距
·line-height：行间距
·text-transform：文本转换

none：不转换（默认值）
capitalize：首字母大写
uppercase：全部转换大写
lowercase：全部转换小写

·text-decoration：文本装饰

none：没有装饰
underline：下划线
overline：上划线
line-through：删除线

·text-align：水平对齐方式

left：左对齐（默认值）
right：右对齐
center：居中

·text-indent：首行缩进
·white-space：空白符处理器

normal：文本空格、空行无效，自动换行（默认）
pre：保留空格、空行
nowrap：文本空格、空行无效，文本不能换行（除非使用br/换行标记）

·text-shadow：阴影效果

标记名{text-shadow: h-shadow v-shadow blur color};
<!-- h-shadow设置水平阴影距离，v-shadow设置垂直阴影距离，blur设置半径，color设置颜色-->

示范源代码如下：

<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <link href="基础.css" type="text/css" rel="stylesheet"/>

        <style type="text/css">

            p{
                color: rgb(237, 100, 146);
                font-size: 20px;
            }

            p strong{color: rgb(255, 0, 85);}


            #two{color: cadetblue;}

            h2.three{color: rgb(15, 214, 221);}
            
            h5,.one,#two{text-decoration: underline;}

            h3{ color: rgb(255, 234, 0);
                text-shadow: 10px 10px 10px rgb(146, 145, 123)};
        </style>
        
    </head>

    <body>
        <h5 style="color: blue;">行内式</h5>
        <p>内嵌式</p>
        <p>外层<strong>嵌套文本</strong>外层</p>
        <h2>链入式</h2>
        <h2 class="one">classone</h2>
        <h2 id="two">idtwo</h2>
        <h2 class="three">classthree</h2>
        <h3>hello</h3>
    </body>

</html>