安庆网站建设工作室,建立网站接受投注是什么意思,陕西专业做网站,wordpress网页模板制作一、CSS简介
1.1HTML局限性 只关注内容的语义#xff0c;可以做简单的样式但是很臃肿且繁琐 1.2CSS优势 CSS层叠样式表#xff0c;标记语言 设置HTML页面中的文本内容#xff0c;图片外形#xff0c;可以美化HTML#xff0c;让页面布局更美观 HTML做框架#xff0c;CSS做…一、CSS简介
1.1HTML局限性 只关注内容的语义可以做简单的样式但是很臃肿且繁琐 1.2CSS优势 CSS层叠样式表标记语言 设置HTML页面中的文本内容图片外形可以美化HTML让页面布局更美观 HTML做框架CSS做样式结构与样式相分离 1.3CSS语法规范 两个部分组成选择器和属性值 stylep {color: red;font-size: 12px;}
/style 选择器{ 属性1属性值1 属性2属性值2 } 1.选择器是用于指定CSS样式的HTML标签花括号内是对该对象设置的具体样式 2.属性和属性值以“键值对”形式出现 3.属性是对指定的对象设置的样式属性例如字体大小、文本颜色等 4.属性和属性值之间用英文“:”分开 5.多个键值对之间用“;分开 1.4CSS代码风格 1.展开格式写 2.字母小写 3.空格规范 1.属性值前面冒号后面保留一个空格 2.选择器标签和大括号中间保留空格 二、CSS基础选择器
2.1CSS选择器的作用
div我是div/div
div我是div/div
p我是段落/p
ulli我是ul里面的li/lili我是ul里面的li/li
/ul
olli我是ol里面的li/lili我是ol里面的li/li
/ol 问题 1.我想把div里面的文字改为红色怎么办 2.我想把第一个div里面的文字改为红色怎么办 3.我想把ul里面的li文字改成红色怎么办 选择器作用 根据不同需求把不同的标签选出来 简单来说选对人做对事 2.2选择器分类 标签名作为选择器 语法 标签名{属性1属性值1属性2属性值2....
} 作用 把某类标签全部选择出来 优点 快速为页面中同类型标签统一设置样式 缺点 不能设计差异化样式只能选择全部的当前标签 能够回答1.我想把div里面的文字改为红色怎么办问题 2.4类选择器 如果想要差异化选择不同的标签单独选一个或某几个标签可以定位使用类选择器 类选择器在HTML中以class属性表示在CSS中类选择器以一个点“.“号表 .类名{属性1属性值1...
} 例如将所有拥有red类的HTML元素均设置为红色类似java方法调用
.red {color: red;
}
li classred/li 注意 1.长名称或词组可以使用中横线来为选择器命名。 2.不要使用纯数字中文等命名尽量使用英文字母来表示。 3.命名要有意义尽量让别人一眼就知道这个类名的目的 多类名
div class类名1 类名2 使用场景 1.可以把一些标签元素相同的样式共同的部分放到一个类里面 2.这些标签都可以调用这个公共的类然后再调用自己的独有的类 3.从而节省CSS代码统一修改也非常方便 2.5ID选择器 HTML元素以ID属性来设置ID选择器CSS中id选择器以“#”来定义 语法 #id名{属性1属性值1...
} 例如将id为nav元素中的内容设置为红色 #nav{color: red;
}
div idnav/div 特点只能调用一次别人切勿使用 id选择器和类选择器的区别
1.类选择器像姓名可以重名id选择器像身份证号不可以重复
2.类最多id一般用于页面唯一性的元素上 2.6通配符选择器
表示选取页面中所有元素标签
* {属性1属性值1...
}
基础选择器作用特点用法标签选择器可以选出所有相同的标签不能差异化选择p{ color:red;}类选择器可以选出一个或者多个标签可以根据需求选择.nav{color:red;}id选择器一次只能选择一个标签ID属性只能子啊每个HTML文档中出现一次#nav{color:red;}通配符选择器选择所有的标签适用于默认初始化*{color:red;}
三、CSS字体属性
3.1字体系列
CSS使用 font-family 属性定义文本的字体系列、大小、粗细和文字样式 styleh2 {font-family: 微软雅黑;}p {font-family: 宋体;}/style 1.各种字体之间必须使用英文状态下的逗号隔开 2.一般情况下如果有空格隔开的多个单词组成的字体加引号 3.尽量使用系统默认自带字体保证在任何用户的浏览器中都能正确显示 4.最常见的几个字体 body{font-family: Microsoft YaHei,tahoma,arial,Hiragino Sans GB;
} 3.2字体大小
CSS使用 font-size 属性定义字体大小
属性功能normal正常的字体相当于数字值400bold粗体数字值700bolder比继承值更重的值lighter比继承值更轻的值integer用数字表示文本字体粗细 取值范围100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
实际开发中更提倡使用数字
p {font-weight: 700;font-weight: bold;
} 3.4文字样式
CSS使用font-style来设置字体风格
属性值作用normal默认值浏览器会显示标准的字体样式 font-style: normal;italic浏览器会显示斜体的字体样式
3.5字体复合属性
字体属性可以把以上文字样式综合来写这样可以更节约代码
body{font: font-style font-weight font-size/line-height font-family;倾斜、粗细、大小、字体
} 1.使用font属性时必须按上面语法格式中的顺序书写不能更换顺序并且各个属性间以空格隔开 2.不需要设置的属性可以忽略取默认值但必须保留font-size和font-famliy属性否则font属性将不起作用 3.6字体属性小结
属性表示注意点font-size字号单位pxfont-family字体font-weight字体粗细加粗700或bold不加粗normal或400font-style字体样式倾斜italic不倾斜normalfont字体连写1.连写有顺序 2.字号和字体必须同时出现 四、CSS文本属性
CSS文本属性可以定义文本的外观比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等
4.1文本颜色
div {color: red;
}
表示属性值预定义的颜色值red,green,blue十六进制#FF0000RGB代码rgb(255,0,0)
4.2对齐文本
text-align用于设置元素内文本内容的水平对齐方式
div{text-align: center;
}
属性值解释left左对齐right右对齐center居中对齐
4.3装饰文本
text-decoration规定添加到文本的修饰可以给文本添加下划线、删除线、上划线等
div {text-decoration: underline;
}
属性值描述none默认。没有装饰线取消链接的下划线underline下划线overline上划线line-through删除线
4.4文本缩进
text-indent用来指定文本的第一行的缩进通常是将段落的首行缩进
div {text-indent: 10px;
}
通过设置该属性所有元素的第一行都可以缩进一个给定的长度甚至该长度可以是负值
p {text-indent: 2em;
} em是一个相对单位就是当前元素(font-size)1个文字的大小如果当前元素没有设置大小会按照父元素的1个文字大小 4.5行间距
line-height用于设置行间的距离行高可以控制文字行与行之间的距离
p {line-height: 26px;
}
行间距上间距文本间距下间距
4.6文本属性总结
属性表示注意点color文本颜色我们通常用十六进制比如#FF0000text-align文本对齐可以设定文字水平的对齐方式text-indent文本缩进通常我们用于段落首行缩进两个字的距离 text-indent: 2em;text-decoration文本修饰记住添加下划线underline 取消下划线noneline-height行高控制行间距 五、CSS三种样式表 1.行内样式表(行内式) 2.内部样式表(嵌入式) 3.外部样式表(链接式) 5.2内部样式表
写到html页面内部把所有的CSS代码抽取出来单独放到一个style标签中
style
/style 1.style标签理论上可以放在HTML文档的任何地方但一般会放在文档的head标签中 2.通过此种方式可以方便控制当前整个页面中的元素样式设置 3.代码结构清晰并没有实现结构与样式完全分离 5.3行内样式表
div stylecolor: red;font-size: 12px;/div 1.style就是标签的属性 2.在双引号中间写法要符合CSS规范 3.可以控制当前标签的设置样式 4.书写繁琐没有体现结构与样式相分离 5.4外部样式表 实际开发都是外部样式表适合于样式比较多的情况核心是样式单独写到CSS文件中之后把CSS文件引入到HTML页面中使用 引入外部样式表分为两步 1.新建一个后缀名为.css的样式文件把所有css代码都放入此文件中 2.在HTML页面中使用link标签引入这个文件 link relstylesheet hrefcss文件路径
rel:定义当前文档与被连接文档之间的关系在这里要制定stylesheet,表示被连接文档是一个样式表文件
href定义所连接外部样式表文件的url可以是相对路径也可以是绝对路径
水平线标签
hr
六、Chrome调试工具 1.Ctrl滚轮调整工具大小 2.左边HTML结构右边CSS 3.右边CSS可以改动数值和查看颜色 4.Ctrl0复原浏览器大小 5.如果点击元素发现右侧没有样式引入极有可能是类名或者样式引入错误 6.如果有样式但是样式前面有黄色叹号提示则样式属性书写错误
