零基础做网站,利用html5 监控网站性能,杭州小程序网站开发公司,网站搭建论文了解
Cascading Style Sheet#xff1a;层叠级联样式表
CSS#xff1a;表现层#xff08;美化网页#xff09;如#xff1a;字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动 css优势#xff1a;
内容和表现分离网页结构表现统一#xff0c;可以实现复用…了解
Cascading Style Sheet层叠级联样式表
CSS表现层美化网页如字体、颜色、边框、高度、宽度、背景图片、网页定位、网页浮动 css优势
内容和表现分离网页结构表现统一可以实现复用样式十分丰富建议使用独立于html的css文件利用SEO容易被搜索引擎收录
CSS的四种导入方式
行内样式
在需要设置的标签后面加style。优先级最高 css内部样式
可在html文件中的head标签中写如下 style 选择器{ 声明1 声明2 声明3 } /style 链接式外部样式
在文件恰当位置添加一个css文件 在需要引用样式的HTML文件的head标签中添加link标签。 link relstylesheet hrefcss文件位置 内部样式与外部样式优先级一致从上到下谁先写谁的优先级就高。
导入式外部样式了解
先在head标签中添加style标签 style import css路径; /style 选择器
作用 选择页面上的某一个或者某一类元素
标签选择器
会选择到页面上所有的这个标签的元素选择一类标签标签选择器优先级最低 标签选择器{ 声明1 声明2 } 类选择器class
在标签后加classclass属性值为自定义class值相同的为一组可以复用类选择器优先级标签选择器选择所有class属性值一致的标签 h1 class类名称/h1 样式引用时格式如下 .类名{ 声明1 声明2 } id选择器
在标签后加idid属性值为自定义id全局唯一,优先级最高 h1 idid名称/h1 样式引用时格式如下 #id名{ 声明1 声明2 } 优先级对比id选择器类选择器标签选择器
层次选择器
根据以下框架写HTML文件的body结构
红色为类选择器紫色为id选择器 HMTL如下 后代选择器
在某个元素的后面,eg:body后面的所有p标签 标签1 标签2{ 声明1 } body后面的p标签全部设置为红色 类tex后面的p标签全部设置为黄色背景 子选择器
某个标签(选择器)的子标签egbody标签后面的p标签该处p标签不包含无序列表中的p标签 标签1标签2{ 声明1 } body后面的第一轮子标签p字体全部设置为红色,类标签tex下的p标签背景为黄色 相邻选择器
某个标签选择器的相邻下一个元素eg类选择器action的相邻标签 选择器标签{ 声明 } li的相邻li标签设置为红色字体 id选择器的同级p设置为蓝色背景tex选择器的同级p设置为黄色背景action的同级p设置为红色字体 通用选择器
选中元素的向下的所有兄弟元素 选择器标签{ 声明 } 类选择器action的相邻p所有下一个元素设置为橙色 结构伪类选择器
伪类选择器格式 标签参数{ 声明 } first-child:第一个元素 last-child最后一个元素 标签nth-child()选择当前p元素的父级下的第几个元素,根据顺序选择 nth-of-type(2):选择父元素下的p标签的第几个根据类型选择 扩展hover鼠标移动改变效果 属性选择器
设置10个标签每个标签中包含许多属性为a标签设置默认样式如下
p classdemoa hrefhttp://baidu.com classlinks item first idfirst1/aa href classlinks item active target_blank titletest2/aa hrefimages/123.html classlinks item 3/aa hrefimages/123.png classlinks item 4/aa hrefimages/123.ipg classlinks item 5/aa hrefabc classlinks item 6/aa href/a.pdf classlinks item 7/aa href/abc.pdf classlinks item 8/aa hrefabc.doc classlinks item 9/aa hrefabcd.doc classlinks item last 10/a
/p
默认样式
style.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: aquamarine;text-align: center;color: red;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/style a标签中存在id属性的元素 标签[属性名]{ 声明 } 选择id属性中属性为first的元素 标签[属性名属性值]{ //是绝对等于 声明 } class属性中属性值包含link的元素 标签[属性名*属性值]{ //*是包含这个元素 声明 } 选中以href属性中以http属性值为开头的元素 标签[属性名^属性值]{ //^是以这个属性值开头 声明 } 选中以href属性中以pdf属性值为结尾的元素 标签[属性名$属性值]{ //$是以这个属性值结尾 声明 } 字体样式
span标签重点突出的字使用span标签
font-family:字体样式font-size:字体大小font-weight:字体粗细color:字体颜色
