自考在线做试卷的网站,个人网站需不需要备案,国人wordpress企业主题,网站开发5人小组分工文章目录 一、什么是样式二、使用样式的必要性三、使用样式的几种方式四、CSS基本语法#xff1a;五、CSS的注释六、CSS选择器——重点相关单词 一、什么是样式
概念#xff1a;
Cascade [kˈskeɪd] Style Sheet [ʃiːt] 级联样式单/表#xff0c;层叠样式表
CSS有化腐… 文章目录 一、什么是样式二、使用样式的必要性三、使用样式的几种方式四、CSS基本语法五、CSS的注释六、CSS选择器——重点相关单词 一、什么是样式
概念
Cascade [kæˈskeɪd] Style Sheet [ʃiːt] 级联样式单/表层叠样式表
CSS有化腐朽为神奇的力量掌握了CSS后在页面美化方面能限制住你的只有想象力。
看到页面感觉很复杂那是不是学习CSS也很难呢其实CSS类似于HTML是标记语言一样没有逻辑运算等。
二、使用样式的必要性
1、随着内容越来越多已经不适合将内容和表现混合在一起为了解决这个问题万维网联盟W3C这个非营利的标准化联盟肩负起了 HTML 标准化的使命并在 HTML 4.0 之外创造出样式Style,1996年推出css1,1998年推出CSS2目前是css3
2、用来表示网页的外观
3、为了解决内容与表现分离的问题
三、使用样式的几种方式
1、内联样式(inline)使用style属性声明在元素中
div style属性属性值/div 注意只对当前元素有效
2、内部内嵌样式(inner) headstyle typetext/css.../style/head注意对当前页面有效
3、外部外链样式(outer)创建一个独立的.css文件 headlink relstylesheet typetext/css hrefx.css//headlink 标签定义文档与外部资源的关系。
rel属性规定当前文档与被链接文档之间的关系。只有 rel 属性的 “stylesheet” 值得到了所有浏览器的支持。其他值只得到了部分地支持。
type属性规定被链接文档的 MIME 类型。
注意外部样式对所有引用它的页面都有效(可用于控制全站的风格)
4、引入样式
可以放置在内部样式或者外部样式中 import url(style.css)注意不建议使用
使用原则
内联样式尽量少用内部样式可以适量使用(全站中只有一个页面中使用的样式)推荐使用外部样式(外部文件不要太多)
四、CSS基本语法
选择器 { 语句声明; 语句声明2; ... 语句声明n }
/*备注:*/
语句声明属性:属性值; 使用花括号包围多条声明语句需要使用分号隔开最后一个可以不用。
例子
h1{ color:red; font-size:14px;}1、内联样式写法 h1 stylecolor:red; font-size:14px;我是一只小小鸟/h12、内部/外部CSS写法
选择器{属性名: 属性值;... 属性名: 属性值;
}
/*例子*/
h1{ color:red; font-size:14px;
}注意
选择器需要区分大小写而属性和属性值不需要空格会被忽略值为若干单词则要给值加引号(主要是字体样式)
选择器命名规范
只能以数字26个英文字母(a-z,A-Z)和—、_来命名而且理论上也不能以数字、下划线减号开头
五、CSS的注释
单行多行均使用一种注释方式 /*这里是注释*/六、CSS选择器——重点
选择器的本质选择XX标签做XX事情。
什么是选择器表示CSS允许你通过标签的标签名、属性名来选择某些HTML并对他们进行操作也就是选择什么做什么事情。
常用的基本选择器在学习CSS3时会接触更多
通配符选择器
写法*{...}
含义选择页面中的所有元素
举例
*{color: red;
}标签选择器
写法元素名{...}
含义选择指定的元素 如div{…}
举例
div{color: red;
}ID选择器
写法#ID值{...}
含义仅选择具有指定ID的元素 如#p2{…}
举例
#p2{color: red;
}类别选择器
写法.类名{...}
含义选择具有指定class的所有元素 .mark{}
举例
.bgpink{background-color: #FBD1D1
}过滤选择器
写法选择器1选择器2{...}
含义选择可被两个选择器同时选定的元素 如p.mark{…} 或 .product.mark{…}
举例
/*过滤选择器表示该元素必须都要包含指定的选择器*/
#font2.box{color: red;
}
后代选择器(父子选择器)
写法选择器1 选择器2{...}
含义选择可被选择器1选择的元素下的所有子元素中可被选择器2选中的元素 如div span{…} .product .mark{…}
举例
.block p{/*表示选中block下的所有的p元素*/color:red;
}直接子元素选择器
写法选择器1选择器2{...}
含义选中选择器1中的直接子元素中可被选择器2选中的 如div span{…}
举例
.block p{/*block下的所有的子元素p*/color:red;
}并列选择器
写法选择器1,选择器2,...选择器n{...}
含义选择可被任何一个选择器选中的元素 h2,#main,.mark{…}
举例
/*并列选择器*/
#font1,#font2,#font3,#font4{font-size: 14px
}伪类选择器
/*
理论上任何元素都可以设置则4种状态
主要用于给a链接设置4种不同的状态的样式
角色相当于是类别选择器只是在特定的场景下才会起作用有如下四个
*/
:link{样式规则
}
:visited{样式规则
}
:hover{样式规则
}
:active{样式规则
}
/*
要按照以上的书写顺序来
记忆口诀爱恨原则 lv ha
*/相关单词 link 链接a链接访问前的状态 visited 访问后的 hover 悬浮 active 激活活动的 style 样式
如需本次课作业、笔记、案例等请在下方微获取。 如果你在web前端开发、面试、前端学习路线有困难可以在下方加我名片。免费答疑行业深潜多年的技术牛人帮你解决bug。
我可提供web前端开发网站开发、技术咨询、答疑、直播讲座等服务
祝你能成为一名优秀的WEB前端开发工程师
