网页浏览器怎么设置,苏州网页关键词优化,页面加速器,系统工具HTML详解连载#xff08;4#xff09; 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽CSS定义书写位置示例注意 CSS引入方式内部样式表#xff1a;学习使用 外部演示表#xff1a;开发使用代码示例行内样式代码示例 选择器作用基础选择器标签选择器举例特… HTML详解连载4 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽CSS定义书写位置示例注意 CSS引入方式内部样式表学习使用 外部演示表开发使用代码示例行内样式代码示例 选择器作用基础选择器标签选择器举例特点 类选择器作用步骤强调注意开发习惯 id选择器作用场景步骤规则 通配符选择器作用范例 新属性字体大小属性名属性值示例 字体粗细属性名属性值关键字 字体样式是否倾斜作用属性名属性值 专栏链接 link
下面进行专栏介绍
本专栏是自己学前端的征程纯手敲的代码自己跟着黑马课程学习的并加入一些自己的理解对代码和笔记 进行适当修改。希望能对大家能有所帮助同时也是请大家对我进行监督对我写的代码进行建议互相学习。
开始喽 CSS定义
层叠样式表是一种样式表语言用来描述HTLML文档的呈现美化内容。
书写位置
title标签下方添加style双标签style标签里书写CSS代码。
示例
titleCSS初体验/title
style
/*选择器{}*/
p{
/*CSS属性*/colorred;
}
/style注意
属性名和属性值成对出现-键值对
CSS引入方式
内部样式表学习使用
CSS代码写在style标签里面
外部演示表开发使用
CSS代码写在单独的CSS文件中.css 在HTML使用link标签引入
代码示例
link rel”stylesheet href”./my.css行内样式
配合javaScript使用 CSS写在标签的style属性值里
代码示例
div style”colorred;font-size:20px;”这是div标签/div选择器
作用
查找标签设置样式
基础选择器
标签选择器 类选择器 id选择器 通配符选择器
标签选择器
使用标签名作为选择器-选中同名标签设置相同的样式。
举例
p,h1,div,a,img…
特点
选中同名标签设置相同的样式无法差异化同名标签的样式
类选择器
作用
查找标签差异化设置标签的显示效果
步骤
定义类选择器- .类名 使用类选择器-标签添加class”类名”
style
/*定义类选择器*/
.red{
color:red;
}
/style!--使用类选择器--
div class”red”这是div标签/div强调
一个类选择器可以给多个标签使用 一个标签可以有多个类名class属性值写多个类名类名间用空格隔开
注意
类名自定义不能纯数字或中文尽量用英文命名
开发习惯
类名见名知意多个单侧可以用-连接例如news-hd
id选择器
作用
查找标签差异化设置标签的显示效果
场景
id选择器一般配合JavaScript使用很少用来设置CSS格式
步骤
定义id选择器-#id名 使用id选择器-标签添加id”id名”
规则
同一个id选择器再一个页面只能使用一次
通配符选择器
作用
查找页面所有标签设置相同样式 * 不需要调用浏览器自动查找页面所有标签设置相同的样式范例
*{
colorred;
}新属性
属性名作用width宽度height高度background-color背景色
字体大小
属性名
font-size
属性值
文字尺寸PC端网页最常用的单位px
示例
p{font-size:30px;
} 字体粗细
属性名
font-weight
属性值
数字开发使用 正常400 加粗700
关键字
正常normal 加粗 bold
字体样式是否倾斜
作用
清楚文字默认的倾斜效果
属性名
font-style
属性值
正常不倾斜normal 倾斜italic
