1、什么是CSSCSS是层叠样式表的简称也可以成为CSS样式表或级联样式表。CSS主要用于设置html页面中的文本内容字体、大小、对齐方式等、图片外形宽高、边框样式、边距等以及版面的布局和外观显示样式。CSS最大价值由HTML专注去做结构呈现样式交给CSS即结构HTML与样式CSS相分离。2、CSS语法规范CSS规则由两个主要的部分构成选择器以及一条或多条声明。选择器是用于指定CSS样式的HTML标签花括号内是对该对象设置的具体样式。属性和属性值以“键值对”形式出现。属性与属性值之间以英文“”分开。多个键值对之间用“;”号区分。3、CSS代码风格p{color:red;font-size:19px;}属性值前面冒号后面保留一个空格。选择器和大括号中间保留空格。4、HTML引入CSS样式的三种方式CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的。行内样式当特殊的样式需要应用到个别元素时就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。pstylecolor:blue;margin-left:20px;这是一个段落。/p内部样式表当单个文件需要特别样式时就可以使用内部样式表。你可以在head部分通过style标签定义内部样式表:headstyletypetext/cssbody{background-color:yellow;}p{color:blue;}/style/head外部样式表当样式需要被应用到很多页面的时候外部样式表将是理想的选择。headlinkrelstylesheettypetext/csshrefmystyle.css/head5、CSS基础选择器定义基础选择器是由单个选择器组成的基础选择器又包括标签选择器、类选择器、id选择器和通配符选择器。标签选择器是指用HTML标签名称作为选择器。语法标签名{属性1属性值1;属性2属性值2;}p{color:red;}类选择器如果想要差异化选择不同的标签单独选一个或某几个标签可以使用类选择器。【类选择器口诀样式 点 定义结构类class调用一个或多个开发最常用】语法.类名{属性1:属性值1;}divclassred文本文本文本/div.red{color:pink;}补充多类名的使用方式1在标签class属性中写 多个类名2多个类名中间必须用空格分开3这个标签就可以分别具有这些类名的样式使用场景1可以把一些标签元素相同的样式放到一个类里面。2这些标签都可以调用这个公共的类然后在调用自己独有的类。3从而节省CSS代码统一修改也非常方便。style typetext/css/*设置盒子宽高*/.box{width:50px;height:50px;}/*设置盒子颜色*/.red{background-color:red;}.green{background-color:green;}/style!-- 定义三个盒子分别调用公共的类设置宽高再调用自己独有的类设置颜色 --divclassred box/divdivclassgreen box/divdivclassred box/divid选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器CSS中id选择器以“#”来定义。id属性只能在每个HTML文档中出现一次。【id选择器口诀样式#定义结构id调佣只能调用一次别人切勿使用。】style typetext/css #red{color:red;}/styledividred颜色设置为红色/divid选择器和类选择器的区别1、类class选择器好比人的名字一个人可以有多个名字同时一个名字可以被多个人使用。2、id选择器好比人的身份证号码全中国式唯一的不得重复。3、id选择器和类选择器最大的不同在于使用次数上。4、类选择器在修改样式中用的最多id选择器一般用于页面唯一性的元素上经常和JavaScript搭配使用。通配符选择器语法*{属性1:属性值1;}6、CSS字体属性font-family属性定义文本的字体系列。注意1各种字体之间必须使用英文状态下的逗号隔开。2一般情况下如果有空格隔开的多个单词组成的字体加引号。body{/*写多个字体的作用是兼容性比较好 如果第一个字体在系统找不到会用第二个字体 以此类推都找不到会使用浏览器默认字体*/font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB;}font-size属性指定字体大小像素px大小是我们网页的最常用的单位。p{font-size:20px;}font-weight设置文本字体的粗细。属性值描述normal默认值不加粗的bold定义粗体加粗的100~900400等同于normal而700等同于bold。注意这个数字后面不跟单位p{font-weight:bold;}font-style属性设置文本的风格。属性值作用normal默认值浏览器会显示标准的字体样式italic浏览器会显示斜体的字体样式font复合属性语法body{font:font-style font-weight font-size/line-height font-family;}注意1使用font属性时必须按照上面的语法顺序不能更换顺序每个属性间以空格隔开。2不需要设置的属性可以省略但必须保留font-size和font-family属性不然font不起作用。7、CSS文本属性color用于定义文本的颜色。p{color:red;}表示属性值预定义的颜色值red、green、blue十六进制#FF0000 , #FF6600RGB代码rgb(255,0,0)对齐文本text-align属性用于设置元素内文本内容的水平对齐方式。div{text-align:center;}属性值解释left左对齐默认right右对齐center居中对齐装饰文本text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、下划线等。div{text-decoration:underline;}属性值描述none默认。没有修饰线最常用underline下划线。 链接a自带下划线overline上划线line-through删除线文本缩进text-indent属性用来指定文本的第一行缩进通常是将段落的首行缩进。div{text-indent:10px;}通过设置该属性所有元素的第一行都可以缩进一个给定的长度甚至该长度可以是负值。div{text-indent:2em;}em是一个相对单位就是当前元素font-size1个文字的大小如果当前元素没有设置大小则会按照父元素的1个文字大小。行间距line-height 属性用于设置行间的距离行高。可以控制文字行与行之间的距离。div{line-height:30px;}案例为了查看整体效果缩小了代码!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1{text-align:center;font-weight:normal;}p{text-indent:2em;line-height:26px;}footer{font-size:12px;color:gray;text-indent:2em;line-height:20px;}.one{font-size:12px;color:gray;}div{text-align:center;}.pic{text-align:center;}/style/headbodyh1北方高温明日达鼎盛 京津冀多地地表温度将超60℃/h1divspanclassone2019-07-03 16:31:47 来源:ahref#styletext-decoration:none;中国天气网/a/spaninputtypetextvalue请输入查询条件...nbsp;button搜索/button/divhrp中国天气网讯 今天3日华北、黄淮多地出现高温天气截至下午2点北京、天津、郑州等地气温突破35℃。预报显示今后三天3-5日这一带的高温天气将继续发酵高温范围以及强度将在4日达到鼎盛预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃其中北京和石家庄的最高气温还有望创今年以来的新高。/ph4气温41.4℃地温66.5北京强势迎七月首个高温日/h4pclasspicimgsrcearth.pngaligncenter/pp今天华北、黄淮一带的高温持续发酵截至今天下午2点陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中北京、天津、郑州均迎来高温日。/pp在阳光暴晒下地表温度也逐渐走高。今天下午2点华北黄淮大部地区的地表温度都在50℃以上部分地区地表温度甚至超过60℃。其中河北衡水地表温度高达68.3℃天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。/ph4明日热度再升级京津冀携手冲击38℃/h4p中国天气网气象分析师王伟跃介绍明天4日华北、黄淮地区35℃以上的高温天气还将继续升级并进入鼎盛阶段高温强度和范围都将发展到最强。 明天北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。/pp不过专家提醒济南被雨水天气完美绕开因此未来一周当地的高温还会天天上岗。在此提醒当地居民注意防暑降温防范持续高温带来的各种不利影响。文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽/pfooter本文来源中国天气网 责任编辑刘京_NO5631/footer/body/html记录难点1、标题下的一行我之前用表格去做很复杂用div可以直接搞定2、图片居中可用段落标签嵌套再设置文本居中
1、什么是CSSCSS是层叠样式表的简称也可以成为CSS样式表或级联样式表。CSS主要用于设置html页面中的文本内容字体、大小、对齐方式等、图片外形宽高、边框样式、边距等以及版面的布局和外观显示样式。CSS最大价值由HTML专注去做结构呈现样式交给CSS即结构HTML与样式CSS相分离。2、CSS语法规范CSS规则由两个主要的部分构成选择器以及一条或多条声明。选择器是用于指定CSS样式的HTML标签花括号内是对该对象设置的具体样式。属性和属性值以“键值对”形式出现。属性与属性值之间以英文“”分开。多个键值对之间用“;”号区分。3、CSS代码风格p{color:red;font-size:19px;}属性值前面冒号后面保留一个空格。选择器和大括号中间保留空格。4、HTML引入CSS样式的三种方式CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的。行内样式当特殊的样式需要应用到个别元素时就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。pstylecolor:blue;margin-left:20px;这是一个段落。/p内部样式表当单个文件需要特别样式时就可以使用内部样式表。你可以在head部分通过style标签定义内部样式表:headstyletypetext/cssbody{background-color:yellow;}p{color:blue;}/style/head外部样式表当样式需要被应用到很多页面的时候外部样式表将是理想的选择。headlinkrelstylesheettypetext/csshrefmystyle.css/head5、CSS基础选择器定义基础选择器是由单个选择器组成的基础选择器又包括标签选择器、类选择器、id选择器和通配符选择器。标签选择器是指用HTML标签名称作为选择器。语法标签名{属性1属性值1;属性2属性值2;}p{color:red;}类选择器如果想要差异化选择不同的标签单独选一个或某几个标签可以使用类选择器。【类选择器口诀样式 点 定义结构类class调用一个或多个开发最常用】语法.类名{属性1:属性值1;}divclassred文本文本文本/div.red{color:pink;}补充多类名的使用方式1在标签class属性中写 多个类名2多个类名中间必须用空格分开3这个标签就可以分别具有这些类名的样式使用场景1可以把一些标签元素相同的样式放到一个类里面。2这些标签都可以调用这个公共的类然后在调用自己独有的类。3从而节省CSS代码统一修改也非常方便。style typetext/css/*设置盒子宽高*/.box{width:50px;height:50px;}/*设置盒子颜色*/.red{background-color:red;}.green{background-color:green;}/style!-- 定义三个盒子分别调用公共的类设置宽高再调用自己独有的类设置颜色 --divclassred box/divdivclassgreen box/divdivclassred box/divid选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器CSS中id选择器以“#”来定义。id属性只能在每个HTML文档中出现一次。【id选择器口诀样式#定义结构id调佣只能调用一次别人切勿使用。】style typetext/css #red{color:red;}/styledividred颜色设置为红色/divid选择器和类选择器的区别1、类class选择器好比人的名字一个人可以有多个名字同时一个名字可以被多个人使用。2、id选择器好比人的身份证号码全中国式唯一的不得重复。3、id选择器和类选择器最大的不同在于使用次数上。4、类选择器在修改样式中用的最多id选择器一般用于页面唯一性的元素上经常和JavaScript搭配使用。通配符选择器语法*{属性1:属性值1;}6、CSS字体属性font-family属性定义文本的字体系列。注意1各种字体之间必须使用英文状态下的逗号隔开。2一般情况下如果有空格隔开的多个单词组成的字体加引号。body{/*写多个字体的作用是兼容性比较好 如果第一个字体在系统找不到会用第二个字体 以此类推都找不到会使用浏览器默认字体*/font-family:Microsoft YaHei,tahoma,arial,Hiragino Sans GB;}font-size属性指定字体大小像素px大小是我们网页的最常用的单位。p{font-size:20px;}font-weight设置文本字体的粗细。属性值描述normal默认值不加粗的bold定义粗体加粗的100~900400等同于normal而700等同于bold。注意这个数字后面不跟单位p{font-weight:bold;}font-style属性设置文本的风格。属性值作用normal默认值浏览器会显示标准的字体样式italic浏览器会显示斜体的字体样式font复合属性语法body{font:font-style font-weight font-size/line-height font-family;}注意1使用font属性时必须按照上面的语法顺序不能更换顺序每个属性间以空格隔开。2不需要设置的属性可以省略但必须保留font-size和font-family属性不然font不起作用。7、CSS文本属性color用于定义文本的颜色。p{color:red;}表示属性值预定义的颜色值red、green、blue十六进制#FF0000 , #FF6600RGB代码rgb(255,0,0)对齐文本text-align属性用于设置元素内文本内容的水平对齐方式。div{text-align:center;}属性值解释left左对齐默认right右对齐center居中对齐装饰文本text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、下划线等。div{text-decoration:underline;}属性值描述none默认。没有修饰线最常用underline下划线。 链接a自带下划线overline上划线line-through删除线文本缩进text-indent属性用来指定文本的第一行缩进通常是将段落的首行缩进。div{text-indent:10px;}通过设置该属性所有元素的第一行都可以缩进一个给定的长度甚至该长度可以是负值。div{text-indent:2em;}em是一个相对单位就是当前元素font-size1个文字的大小如果当前元素没有设置大小则会按照父元素的1个文字大小。行间距line-height 属性用于设置行间的距离行高。可以控制文字行与行之间的距离。div{line-height:30px;}案例为了查看整体效果缩小了代码!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh1{text-align:center;font-weight:normal;}p{text-indent:2em;line-height:26px;}footer{font-size:12px;color:gray;text-indent:2em;line-height:20px;}.one{font-size:12px;color:gray;}div{text-align:center;}.pic{text-align:center;}/style/headbodyh1北方高温明日达鼎盛 京津冀多地地表温度将超60℃/h1divspanclassone2019-07-03 16:31:47 来源:ahref#styletext-decoration:none;中国天气网/a/spaninputtypetextvalue请输入查询条件...nbsp;button搜索/button/divhrp中国天气网讯 今天3日华北、黄淮多地出现高温天气截至下午2点北京、天津、郑州等地气温突破35℃。预报显示今后三天3-5日这一带的高温天气将继续发酵高温范围以及强度将在4日达到鼎盛预计北京、天津、石家庄、济南等地明天的最高气温有望突破38℃其中北京和石家庄的最高气温还有望创今年以来的新高。/ph4气温41.4℃地温66.5北京强势迎七月首个高温日/h4pclasspicimgsrcearth.pngaligncenter/pp今天华北、黄淮一带的高温持续发酵截至今天下午2点陕西北部、山西西南部、河北南部、北京、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中北京、天津、郑州均迎来高温日。/pp在阳光暴晒下地表温度也逐渐走高。今天下午2点华北黄淮大部地区的地表温度都在50℃以上部分地区地表温度甚至超过60℃。其中河北衡水地表温度高达68.3℃天津站和北京站附近的地表温度分别高达66.6℃和66.5℃。/ph4明日热度再升级京津冀携手冲击38℃/h4p中国天气网气象分析师王伟跃介绍明天4日华北、黄淮地区35℃以上的高温天气还将继续升级并进入鼎盛阶段高温强度和范围都将发展到最强。 明天北京南部、天津大部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。/pp不过专家提醒济南被雨水天气完美绕开因此未来一周当地的高温还会天天上岗。在此提醒当地居民注意防暑降温防范持续高温带来的各种不利影响。文/张慧 数据支持/王伟跃 胡啸 审核/刘文静 张方丽/pfooter本文来源中国天气网 责任编辑刘京_NO5631/footer/body/html记录难点1、标题下的一行我之前用表格去做很复杂用div可以直接搞定2、图片居中可用段落标签嵌套再设置文本居中
