wordpress 主题安装方法,廊坊优化技巧,樟木头镇网站建设,wordpress金币插件下篇:CSS基础知识 [下] CSS基础知识 [上] CSS 学习CSS 引入方式选择器 文字属性盒模型盒模型分类盒模型应用 盒模型单位 CSS 学习
层叠样式表#xff08;Cascading Style Sheets#xff0c;缩写为 CSS#xff09;是一种样式表语言#xff0c;用来描述 HTML 或 XML#xf…下篇:CSS基础知识 [下] CSS基础知识 [上] CSS 学习CSS 引入方式选择器 文字属性盒模型盒模型分类盒模型应用 盒模型单位 CSS 学习
层叠样式表Cascading Style Sheets缩写为 CSS是一种样式表语言用来描述 HTML 或 XML包括如 SVG、MathML 或 XHTML 之类的 XML 分支语言文档的呈现。CSS 描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。文件后缀 .css
CSS 规则: 选择器 一条或多条声明 选择器: 需要改变样式的 HTML 元素声明: 由一个属性和一个值组成(属性和值用冒号分开)
CSS 引入方式 内联样式(行内样式) 直接在标签内设置(style...;...; 中间用 ; 分开)p stylecolor: blue; font-size: 20px;CSS/p内部样式(不同页面需要重复写才能生效) 在 .html 文件中的 header/header 里面添加 style/style 来设置样式.!--给p标签设置样式,将这个放在header内--stylep{color:blue;font-size: 10px;}
/style外部样式(推荐使用) 当样式需要应用于多个页面时,使用外部样式可以通过改变一个文件来改变整个站点的外观,每个页面使用 link 标签链接到样式表, 该标签写在文档的头部,即 header/header 里.link relstylesheet typetext/css hrefxxx.cssrelstylesheet 是默认的不许修改hrefxxx.css 引入 .css 文件typetext/css 指示了被链接的文档是一个外部的样式表
选择器
内部和外部样式中不同样式书写方法
全局选择器
可以和任何元素匹配,优先级最低,一般做样式初始化*{margin: 0;
}元素选择器
HTML文档中使用的各个元素(img|p|div|body|b)标签选择器: 选择页面上所有这类型的标签,设置样式img{width: 20px;
}类选择器 规定用 class类名 .类名{} 搭配使用, 针对你想要的所有标签使用 p classtitle你好/p!--设置样式--
style.title{color: yellow;font-size: 20px;}
/style注意: 类名不可以用数字开头同一个标签可以使用多个类选择器,用空格分开, 例如 classclassone classtwo类选择器可被多个标签使用
ID选择器
针对某一个特定的标签使用,只能使用一次(css中用 # 来定义)h1 idtitlehello/h1style#title{border: 3px dashed green;}
/styleID是唯一的ID不能用数字开头测试提示:要把style/style放在 header/header 内运行或者在 .css 中写入然后在 .html 中引入.
合并选择器
语法: 选择器1, 选择器2 {...}提取共同样式
,减少代码量 css p, div, h1 { font-size: 20px; color: blue; }
文字属性
text-align: 水平方向对齐方式(left/center/right)line-height: 设置行高word-spacing: 设置字间距letter-spacing: 设置字间距text-indent: 设置首行缩进text-decoration: 设置文本装饰text-transform: 设置字母大小写
盒模型
盒模型指的是页面上的每个元素都是一个矩形盒子,这个盒子由content、padding、border、margin四个部分组成.
content: 内容区域,显示内容padding: 内边距,内边距是包围内容的透明区域,内边距的背景可以设置背景颜色或背景图片border: 边框,边框是围绕在内边距和外边距外的边界margin: 外边距,外边距是指元素边缘与外部元素边缘之间的距离
盒模型分类 标准盒模型 box-sizing: content-box; (默认属性) width 和 height 只包含内容(content)的宽度和高度不包括内边距(padding)、边框(border)、外边距(margin) IE 盒模型 box-sizing: border-box; width 和 height 包含内容(content)、内边距(padding)和边框(border)但不包括外边距(margin)
盒模型应用
div {width: 300px;height: 200px;padding: 20px;border: 10px solid black;margin: 20px;box-sizing: border-box; /* 或者 content-box */
}在此例中,元素的总宽度为 300px 2*20px 2*10px 360px, 总高度为 200px 2*20px 2*10px 260px
盒模型单位
px(像素): 绝对单位,设置的大小不会改变em: 相对单位,以父元素的 font-size 为基准进行计算,当一个元素没有设置 font-size 属性时,其计算值将继承父元素的 font-size 值rem: 相对单位,始终相对于根元素(html)的字体大小来计算
