北京网站建设是什么,微信小程序发布流程,不用wordpress,厦门网直播CSS 常用 CSS 样式 1. 前端样式查询网站#xff1a; MDN Web Docs (mozilla.org)
w3school 2. border 2.1 借助 MDN 了解 border 我们借助 MDN 网站来学习 border 样式的使用#xff1a; 2.2 border 常见属性 保存代码#xff0c;打开页面#xff1a; 对于标签不同样式的… CSS 常用 CSS 样式 1. 前端样式查询网站 MDN Web Docs (mozilla.org)
w3school 2. border 2.1 借助 MDN 了解 border 我们借助 MDN 网站来学习 border 样式的使用 2.2 border 常见属性 保存代码打开页面 对于标签不同样式的设置可以用一个标签设置好所有的样式并且因为是不同的样式所以不需要指定样式的设置顺序 2.3 border-width 的不同形式设置 我们也可以把一个边框的上下左右线条的宽度设置为不同的像素 方法一统一指定边框上下左右宽度 stylediv{width: 500px;height: 200px;border-width: 5px;border-style: dashed;border-color: black;}
/style保存代码打开页面 方法二分别指定边框上下左右线条宽度 stylediv{width: 500px;height: 200px;border-top-width:3px ;border-bottom-width:5px ;border-left-width:8px ;border-right-width:10px ;border-style: dashed;border-color: black;}
/style保存代码打开页面 方法三按照“上右下左”的顺时针顺序指定边框线条宽度 stylediv{width: 500px;height: 200px;border-width: 2px 5px 7px 10px;border-style: dashed;border-color: black;}
/style保存代码打开页面 3. color 颜色的表现形式 1. 英文单词 2. 以 RGB 形式 所有颜色都由 red , green , blue 三原色组成 调色盘右边两列分别代表透明度和颜色可拖动上面的透明杆选择
点击调色盘中的某一种颜色后代码会显示出三种颜色的比例参数比例参数的范围[0 , 255] 3. 十六进制表示法 4. font-size font-size 表示设置字体大小
!-- 将所有 class 属性为 text 的标签字体设置为 32 px --.text{font-size: 32px;
}5. width / height width设置宽度
height设置高度
只有块级元素可以设置宽高 块级元素是HTML标签的一种显示模式对应的还有行内元素常见块级元素h1-h6, p, div 等块级元素独占一行常见行内元素a , span , img 等不能独占一行块级元素独占一行不用br/就可以自动换行可以设置宽高行内元素不独占一行需要br/换行不能设置宽高 6. 改变显示模式 使用 display 属性可以修改元素的显示模式
display: block !-- 改为块级元素 --display: inline !-- 改为行内元素 --保存代码打开页面 保存代码打开页面 7. padding padding内边距设置内容和边框之间的距离
内容默认是顶着边框来放置的用 padding 来控制这个距离 8. margin margin: 外边距设置元素和元素之间的距离 9. padding / margin 的使用 我们用如下代码讲解内边距和外边距的操作 保存代码打开页面 我们观察上述页面发现 div1 和 div2 这两个框离得太近了接下来要调整它们间的距离外边距 保存代码打开页面 margin 添加后会让元素之间的上下左右边距都是 10 px marginpadding 都是复合标签我们只让 div1 的下边距生效 保存代码打开页面 在第一个边框中内容“div1”和 iddiv5 的透明小格子离 iddiv1 的大格子太近了我们也想调整一下它们和大格子的距离就需要使用 padding padding 和 margin 都是复合属性赋值时也遵从如下原理 10. 在浏览器中调试页面 我们可以按 F12 在浏览器的调试页面中通过改变 css 的样式来观察页面的变化
