美文网首页
CSS学习笔记(一)

CSS学习笔记(一)

作者: 行万_里路 | 来源:发表于2019-07-21 21:50 被阅读0次

1.CSS样式规则

格式:

选择器{属性:值;属性:值;······;属性:值;}

例子:


h2 {

        font-size: 30px;

        font-family:"微软雅黑";

        font-weight:normal;

        font-style:normal;

        }


 2.CSS字体样式属性

(1)字体大小:font-size

字体单位属性值如图所示

(2)字体:font-family

字体属性值常常有宋体、微软雅黑、黑体等。

(3)字体粗细:font-weight

字体粗细的属性值有normal、bold、bolder、lighter、100-900(100的整数值);数值400等价于normal,数值700等价于bold。

(4)字体风格:font-style

属性值如下:

normal:默认值,浏览器会显示标准的字体样式;

italic:斜体字体样式;

oblique:倾斜字体样式;

(5)**综合设置字体风格**

设置格式如下:

选择器{font:font-style font-weight font-size font-family;}

注:


1. 按照格式书写,不能变换顺序,各属性以空格隔开。

2. 无需设置的属性可省去(取默认值),必须保留font-size和font-family属性。


3.CSS注释

两种注释的使用规则:


1. 注释格式:

/* 需要注释的内容 */          “/*”为注释的开始,“*/”注释的结束。

2. 注释格式:

<!--需要注释的内容-->          “<!--”为注释的开始,“--> ”注释的结束。


4.CSS三种不同的样式表

1.行内式

语法格式:

<标签名 style=“属性:值;属性:值;······属性:值;”>内容</标签名>

语法中style是标签的属性,HTML中标签都拥有style属性。

2.内部样式表

这种方式是将CSS代码集中书写在HTML中的head头部标签中。

语法格式:


<head>

<style type="text/css">

选择器{属性:值;属性:值;······属性:值;}

</style>

</head>


3.外部样式表

这种方式是将所有的样式放在一个或者多个以.css为扩展名的外部样式表文件,

通过link标签链接到HTML文档中。

语法格式:


<head>

<link href="css文件的路径" type=“text/css” rel="stylesheet"/>

</head>


注:


1.link是单标签

2.href表示链接文件的URL,可以是相对路径或者绝对路径。

3.type的属性值表示链接的外部文件为CSS。

4.rel的属性值表示被链接的文档是一个样式表文件。


4.三种样式表的总结

相关文章

  • CSS学习笔记(2018-07-29)

    CSS学习笔记 CSS 指层叠样式表 (Cascading Style Sheets) CSS语法 CSS 规则由...

  • CSS入门学习笔记

    CSS学习笔记 CSS= 层叠样式表 cascading style sheets HTML 表达结构 , CSS...

  • 收集前端学习资料

    前端的一些学习资源 html和css代码规范 前端知识体系 前端网址大全 学习CSS布局 通用 CSS 笔记、建议...

  • 二、easyui笔记

    学习笔记一:jquery学习 Ceng coding的用法 Css速写:一般css样式都是开头简写+tab键补全,...

  • CSS知识点整理

    写在前面:这是一篇学习CSS的笔记。重点在于罗列CSS的知识点。 CSS ㈠ CSS入门 什么是CSS?CSS 指...

  • 一小时学会less

    less学习(学习笔记,取所需即可) 写在前面:Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加...

  • CSS学习笔记(一)

    固定格式: 一、文字属性 1、文字样式的属性: font-style:italic; 快捷键:fs+tab fon...

  • CSS学习笔记(一)

    一:CSS了解 CSS 概述: CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如...

  • CSS学习笔记(一)

    1.语法 selector { property:value }选择器 { 属性:值 } 2.选择器类型 ①元素选...

  • CSS学习笔记(一)

    1.CSS样式规则 格式: 选择器{属性:值;属性:值;······;属性:值;} 例子: h2 { f...

网友评论

      本文标题:CSS学习笔记(一)

      本文链接:https://www.haomeiwen.com/subject/egavlctx.html