呼和浩特市做网站的企业,设计师去哪找,小程序seo推广技巧,公司注册网上核名官网文章目录 为什么需要cssCSS语法CSS的组成css注释#xff1a; 快速入门示例#xff1a;常用样式字体颜色和边框颜色介绍颜色示例#xff1a;边框边框的宽度与高度 字体样式背景样式文本居中 字体颜色和边框颜色介绍颜色示例#xff1a;边框边框的宽度与高度 字体样式背景样式… 文章目录 为什么需要cssCSS语法CSS的组成css注释 快速入门示例常用样式字体颜色和边框颜色介绍颜色示例边框边框的宽度与高度 字体样式背景样式文本居中 字体颜色和边框颜色介绍颜色示例边框边框的宽度与高度 字体样式背景样式文本居中css使用三种方式CSS选择器元素选择器ID选择器class选择器 学习参考CSS 教程 (w3school.com.cn)
为什么需要css
在没有CSS之前我们想要修改HTML元素的样式需要为每个HTML元素单独定义样式属性费心费力。所以CSS就出现了。使用CSS将HTML页面的 内容与样式分离提高web开发的工作效率(针对前端开发CSS 可以让 html 元素(内容) 样式(CSS)分离更好的控制页面
CSS语法 CSS的组成 选择器 声明 由属性与值组成用分号分隔 css注释 /注释内容/
快速入门示例
!DOCTYPE html
html langen
headmeta charsetUTF-8titlecss 快速入门/title
/head
bodydivhello,北京/divbr/divhello,上海/divbr/divhello,天津/divbr/
/body
/html
!--课堂代码--
!DOCTYPE html
html langen
headmeta charsetUTF-8titlecss 快速入门/title!--老师解读1. 在 head 标签内出现了 style typetext/css/style2. 表示要写 css 内容3. div{} 表示对 div 元素进行样式的指定4. width: 300px; (属性) 表示对 div 样式的具体指定可以有多个5. 如果有多个使用 ; 分开即可6. 当运行页面时div 就会被 div{} 渲染修饰--style typetext/cssdiv {width: 200px;height: 100px;background-color: gold;}/style
/head
body!--先使用传统的方法--divhello,北京/divbr/divhello,上海/divbr/divhello,天津/divbr/divhello,深圳/divbr/
/body
/html常用样式
字体颜色和边框 颜色介绍 颜色可以写颜色名 比如 green也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809 颜色示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title颜色/titlestyle typetext/css/* 为了讲课方便我们就在这里写 css 样式 *//*说明:颜色可以写颜色名 比如 green也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090color: rgb(255, 222, 1); // color: #ff7d44; // color: red;*/div {/* 有三种方式指定颜色1. 英文2. 16进制 #ff7d44 [使用最多]3. 三原色 rgb(100, 100, 100)*/color: #ff7d44;}/style/headbodydiv韩顺平教育/div/body/html边框 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title边框/titlestyle typetext/cssdiv {width: 300px;height: 100px;border: 1px dashed blue;}/style/headbodydiv韩顺平教育/div/body/html边框的宽度与高度 介绍 宽度/高度像素值100px也可以是百分比值50% 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title背景/titlestylediv {width: 200px;height: 100px;background-color: #ff7d44;}/style/headbodydivhelloword/div/body/html字体样式 介绍 font-size: 指定大小可以按照像素大小font-weight : 指定是否粗体font-family : 指定类型 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title字体样式/titlestyle typetext/css/**/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏, sans-serif;}/style/headbody说明:1. font-size: 指定大小可以按照像素大小br2. font-weight : 指定是否是粗体br3. font-family : 指定字体类型brdivhelloword/div/body/html背景样式 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title背景/titlestylediv {width: 200px;height: 100px;background-color: #ff7d44;}/style/headbodydivhelloword/div/body/html文本居中
代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8title文本居中/titlestyle typetext/cssdiv {border: 1px solid blue; /*顺序不要求*/width: 300px;background: aliceblue;font-size: 40px;font-weight: bold;font-family: 新宋体, sans-serif;margin-left: auto;margin-right: auto;text-align: center;}/style
/head
bodydivhelloword/div
/body
/html字体颜色和边框 颜色介绍 颜色可以写颜色名 比如 green也可以写rgb 值比如rgb(200,200,200)和十六进制表示值比如#70809 颜色示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title颜色/titlestyle typetext/css/* 为了讲课方便我们就在这里写 css 样式 *//*说明:颜色可以写颜色名 比如 green也可以写 rgb 值 比如 rgb(200, 200, 200) 和十六进制表示值比如 #708090color: rgb(255, 222, 1); // color: #ff7d44; // color: red;*/div {/* 有三种方式指定颜色1. 英文2. 16进制 #ff7d44 [使用最多]3. 三原色 rgb(100, 100, 100)*/color: #ff7d44;}/style/headbodydiv韩顺平教育/div/body/html边框 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title边框/titlestyle typetext/cssdiv {width: 300px;height: 100px;border: 1px dashed blue;}/style/headbodydiv韩顺平教育/div/body/html边框的宽度与高度 介绍 宽度/高度像素值100px也可以是百分比值50% 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title背景/titlestylediv {width: 200px;height: 100px;background-color: #ff7d44;}/style/headbodydivhelloword/div/body/html字体样式 介绍 font-size: 指定大小可以按照像素大小font-weight : 指定是否粗体font-family : 指定类型 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title字体样式/titlestyle typetext/css/**/div {border: 1px solid black;width: 300px;font-size: 40px;font-weight: bold;font-family: 华文新魏, sans-serif;}/style/headbody说明:1. font-size: 指定大小可以按照像素大小br2. font-weight : 指定是否是粗体br3. font-family : 指定字体类型brdivhelloword/div/body/html背景样式 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title背景/titlestylediv {width: 200px;height: 100px;background-color: #ff7d44;}/style/headbodydivhelloword/div/body/html文本居中
代码示例
!DOCTYPE html
html langen
headmeta charsetUTF-8title文本居中/titlestyle typetext/cssdiv {border: 1px solid blue; /*顺序不要求*/width: 300px;background: aliceblue;font-size: 40px;font-weight: bold;font-family: 新宋体, sans-serif;margin-left: auto;margin-right: auto;text-align: center;}/style
/head
bodydivhelloword/div
/body
/htmlcss使用三种方式 在标签的 style 属性上设置CSS样式 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title在标签的style属性上设置CSS样式/title/headbodydiv stylecolor: red;hello,北京/divbr/div stylecolor: blue;hello,上海/divbr/div stylecolor: green;hello,天津/divbr//body/html在head标签中使用style标签来定义需要的CSS样式 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title在head标签中使用style标签来定义需要的CSS样式/titlestylediv {color: blue;}span {color: red;}/style/headbodydivhello,北京/divbr/divhello,上海/divbr/spanhello,span/span/body/html把 CSS 样式写成单独的 CSS 文件再通过 link 标签引入 代码示例 /* test.css 内容 */div {width: 300px;height: 100px; /* 这是一个注释信息 */background: beige;}span {border: 3px solid red;}use-css-style.html!DOCTYPE htmlhtml langenheadmeta charsetUTF-8title把 CSS 样式写成单独的 CSS 文件再通过 link 标签引入/title!-- link 标签专门用来引入 css 样式代码 --link relstylesheet hreftest.css//headbodydivhello, 北京~/divbr/divhello, 上海/divbr/spanhello, span/span/body/htmlCSS选择器 元素选择器 通常是某个 HTML 元素 比如 p、h1、adiv等 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title元素选择器/title/headbodyh1helloword/h1phello, world~/p/body/htmlID选择器 可以为标有特定id的HTML元素指定特定的样式。 id选择器以#来定义 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8titleid 选择器/title!-- 我们就在这里写css样式解读1. 使用id选择器需要先在要修饰元素指定id属性, id值是程序员自己指定2. id 是唯一的不能重复3. 在style 标签中指定id选择器时前面需要有 #id值 --style typetext/css#hsp1 {color: gold;}#css2 {color: green;}/style/headbodyh1 idhsp1helloword/h1p idcss2hello, world~/p/body/htmlclass选择器 可以通过 class 属性选择去使用这个样式 基本语法 .class 属性值{属性:值} 代码示例 !DOCTYPE htmlhtml langenheadmeta charsetUTF-8title类选择器/title!-- 我们就在这里写css样式解读1. 使用class选择器需要在被修饰的元素上设置class属性属性值由程序员指定2. class 属性的值可以重复3. 需要在 style/style 指定类选择器的具体样式前面需要是 .类选择器名 --style typetext/css.css1 {color: red;}.css2 {color: sandybrown;}/style/headbodydiv classcss1helloword/divdiv classcss1helloword 8/divp classcss2hello, world~/p/body/html文本来源韩顺平java课程笔记
