网站建设社团活动宗旨,兼职网站做任务,重庆市建设银行网站首页,昆明建网站的公司HTML 摆放内容#xff0c;CSS 美化内容
#xff11; CSS
定义#xff1a;层叠样式表#xff08;Cascading Style Sheets#xff0c;缩写为CSS#xff09;#xff0c;是一种样式表语言#xff0c;用来描述HTML文档的呈现#xff08;美化内容#xff09;。 书写位置CSS 美化内容 CSS
定义层叠样式表Cascading Style Sheets缩写为CSS是一种样式表语言用来描述HTML文档的呈现美化内容。 书写位置title 标签下方添加 style 双标签style 标签里面书写 CSS 代码。
1.1 CSS 引入方式
1.1.1 内部样式表
CSS 代码写在 style 标签里面 例子
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/titlestylep {color: red;/* 数字 加 像素 */font-size: 30px;}/style
/head
bodyp初识 CSS/p
/body
/html
运行效果 1.1.2 外部样式表 开发最常用
CSS 代码写在单独的 CSS 文件中.css)在 HTML 使用 link 标签引入 HTML 文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS 引入方式/title!-- link 引入外部样式表 rel关系样式表 关系 --link relstylesheet href./demo2.css
/head
bodyp这是 p 标签/p
/body
/html
CSS 文件
/* 写法选择器 {} */
p {color: red;
}
运行效果 1.1.3 行内样式表 配合 JS 使用
配合 JavaScript 使用
CSS 写在标签的 style 属性值里 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS 引入方式/title!-- link 引入外部样式表 rel关系样式表 关系 --link relstylesheet href./demo2.css
/head
bodyp这是 p 标签/p!-- 行内样式表 style CSS 属性 --div stylecolor:green; font-size: 20px;这是 div 标签/div
/body
/html
运行效果 2 选择器
作用查找标签设置样式基础选择器标签选择器、类选择器、id 选择器、通配符选择器
2.1 标签选择器
使用标签名作为选择器 → 选中同名标签设置相同的样式。
2.2 类选择器
作用查找标签差异化设置标签的显示效果
步骤
定义类选择器 - .类名使用类选择器 - 标签添加 class类名 开发习惯类名见名知意多个单词可以用连接例如news-hd 新闻头部
一个类选择器可以供多个标签使用一个标签可以使用多个类名类名之间用空格隔开
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title类选择器/titlestyle.red {color: red;}.size {font-size: 20px;}/style
/head
body!-- 一个标签可以使用多个类选择器 class 属性写多个类名即可类名用空格隔开 --p classred size 这是 p 标签/p!-- 一个类选择器也可以被多个标签使用 --div classreddiv 标签/div
/body
/html
运行效果 2.3 id 选择器
作用查找标签差异化设置标签的显示效果。 场景id 选择器一般 配合JavaScript使用很少用来设置 CSS 样式 规则同一个 id 选择器在一个页面只能使用一次
步骤
定义 id 选择器 → #id名使用 id 选择器 → 标签添加 idid名 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleid 选择器/titlestyle#red {color: aqua;}/style
/head
body!-- id 选择器一般配合 js 使用 --div idreddiv 标签/div
/body
/html
2.4 通配符选择器
作用查找页面所有标签设置相同样式 通配符选择器不需要调用浏览器自动查找页面所有标签设置相同的样式 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title通配符选择器/titlestyle* {color: red;}/style
/head
bodydivdiv 标签/divpp 标签/ph1h1 标签/h1
/body
/html
运行效果 3 画盒子
目标使用合适的选择器画盒子 差异化画盒子使用类选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title画盒子/titlestyle/* 用类选择器 */.red {width: 100px;height: 100px;background-color: brown;}.orange {width: 200px;height: 200px;background-color: orange;}/style
/head
body!-- div 标签独占一行 --div classreddiv1/divdiv classorangediv2/div
/body
/html
运行效果 4 文字控制属性 4.1 行高的特殊作用垂直居中
垂直居中技巧行高属性值等于盒子高度属性值 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title行高垂直居中/titlestylediv {height: 50px;background-color: skyblue;/* 行高和 height 一样即可垂直居中 */line-height: 50px;}/style
/head
bodydiv文字/div
/body
/html
运行效果 4.2 font 复合属性
使用场景设置网页文字公共样式font: 是否倾斜 是否加粗 字号/行高 字体 必须按顺序书写注意字号和字体值必须书写否则 font 属性不生效 4.3 颜色值写法 5 调试工具 谷歌浏览器
鼠标右键、检查或者 F12
5.1 找错误 5.2 调试看效果 参考链接
29-体验CSS_哔哩哔哩_bilibili 30-CSS引入方式_哔哩哔哩_bilibili 31-选择器-标签和类_哔哩哔哩_bilibili 32-选择器-id和通配符_哔哩哔哩_bilibili 33-画盒子_哔哩哔哩_bilibili 34-字体修饰属性-大小和粗细和倾斜_哔哩哔哩_bilibili 35-行高_哔哩哔哩_bilibili 35-行高_哔哩哔哩_bilibili 36-字体族_哔哩哔哩_bilibili 37-font属性_哔哩哔哩_bilibili 39-文字颜色_哔哩哔哩_bilibili 40-调试工具_哔哩哔哩_bilibili
