JavaScript学习二：网页开发基础_CSS

最新推荐文章于 2022-12-07 15:15:22 发布

19931015

最新推荐文章于 2022-12-07 15:15:22 发布

阅读量284

点赞数 2

分类专栏：网页文章标签： javascript css 学习前端

本文链接：https://blog.csdn.net/weixin_56016530/article/details/126697672

版权

网页专栏收录该内容

2 篇文章 0 订阅

订阅专栏

注：代码符号通常为英文符号

1.CSS

CSS（层叠式样表），CSS主要用于设置HTML页面中文本格式（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）和版面的布局等外观样式。

定义规则：

选择器{属性1：属性值1;属性2：属性值2;......}

//例：对div标签进行设置
div{
    border:1px solid red;
    width:600px;
    height:400px;
}

CSS颜色取值：

预定义的颜色值，例：red、green、blue等
十六进制形式的值，例：#FF0000、#FF6600等，实际工作中，常用十六进制定义颜色
RGB代码，例：rgb(255,0,0)、rgb(100%,0%,0%)等

2.CSS引用方式

2.1行内式（内联式）

基本语法格式：

<标签名 style="属性1：属性值1; 属性2：属性值2;">内容</ 标签名>

<h1 style="font-size:20px; color:blue;">
    使用行内式CSS修饰一级标题的字体大小和颜色
</ h1>

2.2内嵌式

基本语法格式：

<head>

选择器 {属性1：属性值1; 属性2：属性值2;}

</style>

</head>

<head>
    <style type="text/css">//只有设置type属性值为text/css，浏览器才知道<style>标签包含CSS代码
        /*定义标题标签居中对齐*/
        h2{text-align:center;}
    </style>
</head>
<body>
    <h2>内嵌式2级标题</h2>;
</body>

2.3外链式（链入式）

将所有样式放在一个或多个以.css为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文件中。

基本语法格式：

<head>

</head>

【href：外部样式表文件的地址，可以是相对路径，或是绝对路径

type：定义所链接文档的类型，这里为"text/css",表示链接外部文件为CSS

rel：定义当前文档与被链接文档之间的关系，这里为"stylesheet"，表示被链接文档是一个样式表文件。】

（1）创建名为style.css的样式表

<style type="text/css">
    /*定义标题标签居中对齐*/
    h2{
        text-align:center;
    }
</style>

（2）创建HTML文档

<head>
    <title>使用外链式</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <h2>外链式</h2>
</body>

2.4导入式

基本语法格式：

@import url(css文件路径);或@import "css文件路径";

/*在此还可存放其他CSS样式*/

</style>

 <style type="text/css">
           @import "style.css";
  </style>

3.CSS选择器和常用属性

3.1标签选择器

基本语法格式：

标签名{属性1：属性值1;属性2：属性值2;}

3.2类选择器

基本语法格式：

.类名{属性1：属性值1;属性2：属性值2;}

3.3id选择器(id是唯一的，只对应文档某一具体元素)

基本语法格式：

#id{属性1：属性值1;属性2：属性值2;}

3.4通配符选择器(作用范围最广，能匹配页面中所有元素)

基本语法格式：

*{属性1：属性值1;属性2：属性值2;}

4.CSS常用属性

margin	对象的外边距，对象与对象之间距离
padding	对象内边距，对象内容与对象边框距离
background	设置背景颜色，背景图片排列方式，是否固定背景图片和背景图片位置
font-family	规定元素的的字体系列
border	设置边框宽度，样式，颜色
font	字体样式，小型的大写字体，字体粗细，文字的大小，行高和文字字体
height	指定对象的高度
line-height	设置行间距，行与行之间的距离
color	指定文本的颜色
text-align	指定文本对齐方式
text-decoration	指定文本显示样式属性值：line-through（删除线），overline（上划线） underline（下划线），none（无效果）等
vertical-align	设置元素垂直对齐方式
display	指定对象显示形式