php网站开发更换模板,电子商务网站规划的原则,建网站和开发app哪个难,沈阳推广网站目录
一、CSS的介绍
二、CSS语法规则
三、CSS引入方式
四、CSS的基础选择器
五、CSS属性: 字体font
六、CSS属性#xff1a;文本text
七、CSS属性#xff1a;颜色
八、样式层叠问题
九、谷歌浏览器的调试工具
十、拓展#xff1a;标签(盒子)水平居中的方法 一、C…目录
一、CSS的介绍
二、CSS语法规则
三、CSS引入方式
四、CSS的基础选择器
五、CSS属性: 字体font
六、CSS属性文本text
七、CSS属性颜色
八、样式层叠问题
九、谷歌浏览器的调试工具
十、拓展标签(盒子)水平居中的方法 一、CSS的介绍
1.什么是CSS?
CSS是 层叠样式表(Cascading Style Sheets) 的缩写是页面美化的一种编程语言
2.CSS作用是什么?
给页面中的HTML标签设置样式进行美化 二、CSS语法规则
1.CSS写在哪里
CSS写在style/style标签中,或者CSS文件中或者HTML的style属性里
2.CSS的书写格式(常用)
CSS选择器 {
CSS属性 : 属性值 ;
······
} 三、CSS引入方式
1.内嵌式
css写在style标签中style标签一般写在head标签中,title标签下面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylep {color : red;}
/style/head
bodypcss初体验/p
/body
/html
2.外联式
另创一个.css文件专门写css然后html文件引入css文件
然后通过link标签引入
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet hrefcss文件名.css/link/head
bodypcss初体验/p
/body
/html
p {color : red;
}
3.行内式
写在标签的style属性中
一般配合js使用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyp stylecolor:red;css初体验/p
/body
/html 四、CSS的基础选择器
选择器的作用选中页面中对应的标签定位标签
1.标签选择器
概念标签选择器就是以标签名命名的选择器
结构标签名 { }
作用通过标签名选中页面中所有这类标签
2.类选择器
概念类选择器就是以类名命名的选择器
结构.类名 { }
作用通过类名选中页面中所有带有这个类名的标签 知识补充类(class) 类class是html标签的一个属性它的属性值是一个类名 相当于给这个标签起了一个名字 格式 class 类名 通常给css使用用于做美化工作 温馨提示:· 1.由于是代表名字所以不同标签类名可以相同 2.一个标签可以有多个名字所以可以有多个类名 格式class 类名1 类名2 3.类名要遵循标识符规则 3.id选择器
概念id选择器就是以id名命名的选择器
结构#id名 { }
作用通过id名找到页面中所有带有这个id名的标签设置样式 知识补充: id id是html标签的一个属性它的属性值是id名 相当于给标签起了一个独一无二的id 格式id id名 通常给js使用不做美化工作 温馨提示:· 1.由于是代表独一无二id所以不同标签id名不可以相同 2.一个标签只可以有一个id 3.id名要遵循标识符规则 4.通配符选择器
概念通配符选择器就全选选择器
格式* { }
作用找到页面中所有的标签设置样式
常用来用来去除标签默认的margin和padding(后面学习) 五、CSS属性字体font
1.字体样式
属性名: font-style
属性值
正常normal
倾斜italic
* {font-style: normal;font-style: italic;
}
2.字体粗细
属性名: font-weight
属性值:
1.关键字
正常normal
加粗bold(bou的)
2.数字(常用)
正常400
加粗700
* {font-weight: normal;font-weight: bold;font-weight: 400;font-weight: 700;
}
3.字体大小
属性名: font-size
属性值数字px
注意谷歌浏览器默认16px大小字体
* {font-size: 20px;
}
4.字体类型
属性名font-family
属性值具体字体1具体字体2具体字体3······ 具体字体例 微软雅黑、黑体、宋体、楷体······· 渲染规则从左往右顺序查找电脑安装的字体
温馨提示开发时尽量选择系统常见自带的字体
* {font-family: 微软雅黑,黑体,宋体;
}
5.字体复合属性
属性名font
属性值style值 weight值 size值 family值
温馨提示可以省略前两个省略的为默认值size/后面乘以对应的行高倍数来设置行高
* {font: italic 700 10px 宋体;font: 19px 微软雅黑;font: 16px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei;
} 六、CSS属性文本text
1.文本(首行)缩进
属性名text-indent
属性值
1.数字px(需要参考font-size的px)
2.数字em (推荐使用: 1em 当前标签的font-size的大小)
* {text-indent: 50px; 如果font-size是50px则表示缩进1个字符text-indent: 2em; 缩进2个字符
} 2.文本水平对其方式
属性名text-align
属性值
左对齐left
居中对其center
右对齐right
温馨提示如果需要让文本(p\h\div)水平居中text-align属性给文本所在标签设置
* {text-align: left;text-align: center;text-align: right;
}
3.text-align center 还能能让哪些元素水平居中?
注意如果需要让以下元素水平居中需要给以上元素的父元素设置 input标签、span标签、img标签、a标签
divspan水平居中/span 需要给div设置给span设置无效果
/div
div classggdiv ckassddspan水平居中/span 需要给gg和dd设置都可以给span设置无效/div
/div
3.文本装饰
属性名text-decoration
属性值
无装饰线none
下划线underline
删除线line-through
温馨提示开发中经常使用text-decoration: none 来清除a标签的下划线
* {text-decoration: none;text-decoration: underline;text-decoration: line-through;
}
a {text-decoration: none;
}
4.文本行高
属性名line-height
属性值
1.数字px
2.倍数(当前标签font-size的倍数)
温馨提示行高一般用于让内容垂直居中开发中可以使用line-height: 1 取消上下间距 行高 行高由上间距文字高度下间距组成 文字高度是保持不变的在变的是上间距和下间距 * {line-height: 20px;line-height: 2;
} 七、CSS属性颜色
1.字体颜色
属性名color
2.背景颜色
属性名: background-color
3.两者的属性值 颜色英文单词red、blue、····· rgb表示rgb(数字,数字,数字) rgba表示gba(数字,数字,数字,不透明度数字) a表示透明度数字在0-1范围内 十六进制法#十六进制数
温馨提示开发中ui设计师会把颜色编号写在旁边不需要我们去记忆
* {color: red;color: rgb(1,2,3);color: rgba(1,2,3,0.5);color: #0000;
} 八、样式层叠问题
问题如果给同一个标签设置了相同的样式此时浏览器如何渲染
结果覆盖写在上面的被写在下面的样式覆盖生效下面的
* {color: red;color: blue;
}
* {color: green;
} 九、谷歌浏览器的调试工具
1.排错
打开页面右击检查
看到elements这行表示元素
左边表示html标签右边表示css样式
当出现css被划线了代表该css未被使用
如果出现黄色三角则代表该附近css语法错误
2.调试
样式那块区域打勾代表使用该样式可以去掉打勾不使用该样式
也可以双击属性值然后修改属性值
也可以双击属性值然后按tab换行换到最后一行可以添加css语句
这些操作都会使页面发生变化有助于我们调试
温馨提示这些调试修改的样式是不会改变CSS的代码的需要我们调试完对应样式后进入到代码里面修改成需要的 十、拓展标签(盒子)水平居中的方法
属性名margin
属性值0 auto
* {margin: 0 auto;
}
