整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

Css样式一般写在哪里?小白轻松入门

Css样式一般写在哪里?小白轻松入门

.1 直接在标签上使用style属性来设置样式

<div style="color: red;font-weight: bold;font-size: 120px;">果果爸爸青少年编程</div>

一个html标签,可以由多个“属性名:属性值”来进行修饰,多个属性名之间用“;”隔开。

1.2 引入CSS的三种方式

行内css, 内部css, 外部css

1.2.1行内css:

<p style="color: blue;font-family: '黑体';">

今天学习css了,网页可以修饰了。

</p>

适合局部修饰网页中少量html标签

1.2.2内部CSS

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

p{

font-weight: bolder;

color:darkslategray;

font-family: "微软雅黑";

}

</style>

</head>

<body>

<p>

今天学习css了,网页可以修饰了。

</p>

<p>

今天学习JS了,可以控制网页标签了。

</p>

<p>

今天学习HTML了,可以搭建网页基础结构了。

</p>

</body>

</html>

前一直使用windows系统的电脑,创建文件很简单,改格式也非常的简单。但换了苹果电脑,如何创建一个HTML文件?却把我给整蒙了。

首先,为什么mac上不能直接新建文本文件

因为mac一都是以应用的方式来管理文件。

我们在Windows上的习惯是:找到一个目录-->新建文件-->打开对应的应用-->记录-->保存。

mac的系统倾向是:打开应用程序-->记录-->找目录-->保存。

一对比,我们发现mac并不是不能建文本文件,只是建的过程有些麻烦。

下面我们来看一下详细的操作步骤:

一,在访达里找到文本编辑器并打开。就看到下图的样子。


二,找到左下角新建文稿,点击,会出现一个编辑文稿的窗口。

这时你就可以把你要写的东西写在这个文稿里边,比如我就写了一个简单的html代码。


三,找到电脑窗口左上角,文件-->移到...


这里就是把文件移入到你方便找的文件夹里,如下图,会出现一个位置下拉框


在这里我把这个文件存在了桌面上。


四,在访达里找到你的文件,右键点击,在菜单栏里找到重新命名



这时候你就可以把文件改成html格式。

到这里改成HTML就完成了,然后选择打开方式,在浏览器中打开,这时候你可能出现了,另外一个问题。

为什么我的HTML文件在mac浏览器打开全是源码?

如下图所示:


解决方案如下:

一,打开文本编辑。找到窗口左上角:文本编辑-->偏好设置


二,设置两样东西,注意我红色圈圈区域

新建文稿设置:把格式改为纯文本。


打开和存储设置:改成我圈住的勾选样子


再用浏览器打开html文件,就会出现下面的网页了。



如果有需要的,建议收藏呦!

、CSS字体样式

定义字体系列,大小,粗细和文字样式

(一)字体系列(font-family)


(二)字体大小(font-size)

(三)字体粗细(font-weight)

(四)字体样式(font-style)

(五)字体复合属性(font)

 p {
    font: font-style font-weight font-size/line-height font-family;
  }

不能更换顺序,必须保留font-size和font-family

二、CSS文本属性

定义文本外观,如:文本颜色,对齐文本,装饰文本,文本缩进,行间距等

(一)文本颜色(color)

(二)对齐文本(text-align)

(三)装饰文本(text-decoration)

(四)文本缩进(text-indent)


(五)行间距(line-height)

三、格式化代码

  1. Emmet语法
    前身为Zen coding,它使用缩写来提高html/css的编写速度,VSCode内部已经集成该语法,快速生成HTML结构语法和CSS样式语法

2. 快速生成HTML结构语法

  • 生成标签,直接输入标签按Tab键即可
  • 生成多个相同的标签,标签加星号*键按Tab键
  • 父子级关系的标签,可以用大于号>和enter键
  • 兄弟关系的标签,可以用加号+和enter键
  • 生成带有类名或id名字,可写成标签加.类名/#名加Tab键(p.one生成
  • 生成.div类名是有顺序的,可用自增符号¥
  • 生成标签的内部写内容,可用{}表示

3.快速生成CSS样式语法

  • CSS基本采取简写形式即可(w 200 加Tab生成width: 200px;)
  • 单词首字母加Tab键

4.快速格式化代码

  • Shift+Alt+F/右键-格式化代码
  • 保存页面时自动格式化代码(在设置中的文本编辑器中找到格式,勾选Format On Save即可,也可把Format On Type勾选上)

5.去掉li前面的项目符号