CSS学习.note1

最新推荐文章于 2024-10-02 23:33:51 发布

Juan_enjoy

最新推荐文章于 2024-10-02 23:33:51 发布

阅读量134

点赞数

分类专栏： HTML5+CSS学习笔记文章标签： css html javascript

本文链接：https://blog.csdn.net/Juan_Eleanor/article/details/123403888

版权

HTML5+CSS学习笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、CSS语法规范

CSS样式包含在<style>标签，一般写到 </head> 上方。

<head>

 <style>

 h4 {
 color: blue;
 font-size: 100px;
 }

 </style>

</head>

二、CSS选择器

1.基础选择器：

标签选择器、类选择器、id选择器和通配符选择器

1.1 标签选择器

标签名{

属性1: 属性值1;

属性2: 属性值2;

属性3: 属性值3;

...

}

p {
  text-align: center;
  color: red;
}

1.2 类选择器

类选择器选择有特定 class 属性的 HTML 元素。

如需选择拥有特定 class 的元素，请写一个句点（.）（英文状态下）字符，后面跟类名。

.类名 {

属性1: 属性值1;

...

}

.red {
 color: red;
}

多类名使用方式

<div class="red font20">water</div>

各个类名中间用空格隔开

1.3 id选择器

#para1 {
  text-align: center;
  color: red;
}

注意：id 名称不能以数字开头；只能调用一次

1.4 通配符选择器

通用选择器（*）选择页面上的所有的 HTML 元素。

* {
  margin: 0;
 padding: 0;
}

1.5 分组选择器

如需对选择器进行分组，用逗号来分隔每个选择器。

 h1,
 h2,
 p {
  text-align: center;
  color: red;
}

三、 CSS使用

1. 外部CSS

外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

外部样式表可以在任何文本编辑器中编写，并且必须以 .css 扩展名保存。

body {
  background-color: lightblue;
}

h1 {
  color: pink;
  margin-left: 20px;
}

2.内部CSS

内部样式在 HTML 页面的 <head> 部分内的 <style> 元素中进行定义：

3.行内CSS

如需使用行内样式，请将 style 属性添加到相关元素。style 属性可包含任何 CSS 属性。

<body>

<h1 style="color:blue;text-align:center;">tea</h1>

<p style="color:red;">phone</p>

</body>

4.优先顺序：

行内样式（在 HTML 元素中）（最高）
外部和内部样式表（在 head 部分）
浏览器默认样式

四、 CSS字体属性

1. 字体系列

font – family 属性定义

p { 
font-family:"微软雅黑";
}

div {
font-family: Arial,"Microsoft Yahei", "微软雅黑";
}

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: 'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';

2. 字体大小

font-size 属性定义

p {
font-size: 20px;
}

3.字体粗细

font- weight 属性定义

p {
 font-weight: 700;
}

400 等同于normal 700 等同于 bold

4. 文字样式

font – style 属性定义

p { 
font-style: normal / italic;
 }

5. 字体复合属性

代码规范：

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

不能更换顺序，并且各个属性间以空格隔开

必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

五、 CSS 文本属性

1. 文本颜色

color属性定义文本颜色

div {
 color: red;
}

颜色还有十六进制，如#FF0000等

RGB代码如rgb(255,12,0)

2.对齐文本

text – align 属性设置文本水平对齐

div {
 text-align: center/ left / right;
}

3. 装饰文本

text – decoration 数组添加文本修饰，下划线、删除线和上划线

div {
 text-decoration： none / underline/ overline/ line-through；
}

4. 文本缩进

text – indent 属性定义文本第一行缩进

p {
 text-indent: 2em;
}

em 是一个相对单位，就是当前元素（font-size) 1 个文字的大小

行间距

line – height 属性设置行间的距离

p {
 line-height: 26px;
}

Juan_enjoy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录