百度招聘 网站开发,做网站用什么后台,iis关闭网站,哪个网站买东西最便宜css 的介绍
学习目标 能够知道css的作用 1. css 的定义 css(Cascading Style Sheet)层叠样式表#xff0c;它是用来美化页面的一种语言。 没有使用css的效果图 使用css的效果图 2. css 的作用 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 控制页面布局, 比如…css 的介绍
学习目标 能够知道css的作用 1. css 的定义 css(Cascading Style Sheet)层叠样式表它是用来美化页面的一种语言。 没有使用css的效果图 使用css的效果图 2. css 的作用 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。 控制页面布局, 比如: 设置浮动、定位等样式。
3. css 的基本语法
选择器{
样式规则
}
样式规则
属性名1属性值1;
属性名2属性值2;
属性名3属性值3;
...
选择器:是用来选择标签的选出来以后给标签加样式。
代码示例:
div{ width:100px; height:100px; background:gold;
}
说明
css 是由两个主要的部分构成选择器和一条或多条样式规则注意:样式规则需要放到大括号里面。
4. 小结 css 是层叠样式表它是用来美化网页和控制页面布局的。 定义 css 的语法格式是: 选择器{样式规则}
css 的引入方式
学习目标 能够知道 css 的引入三种方式 css的三种引入方式 行内式 内嵌式内部样式 外链式
1. 行内式 直接在标签的 style 属性中添加 css 样式 示例代码:
div stylewidth:100px; height:100px; background:red hello/div
优点方便、直观。 缺点缺乏可重用性。
2. 内嵌式内部样式 在head标签内加入style标签在style标签中编写css代码。 示例代码:
headstyle typetext/cssh3{color:red;}/style
/head
优点在同一个页面内部便于复用和维护。 缺点在多个页面之间的可重用性不够高。
3. 外链式 将css代码写在一个单独的.css文件中在head标签中使用link标签直接引入该文件到页面中。 示例代码:
link relstylesheet typetext/css hrefcss/main.css
优点使得css样式与html页面分离便于整个页面系统的规划和维护可重用性高。 缺点css代码由于分离到单独的css文件容易出现css代码过于集中若维护不当则极容易造成混乱。
4. css引入方式选择 行内式几乎不用 内嵌式在学习css样式的阶段使用 外链式在公司开发的阶段使用可以对 css 样式和 html 页面分别进行开发。
5. 小结 css 的引入有三种方式, 分别是行内式、内嵌式、外链式。 外链式是在公司开发的时候会使用最能体现 divcss 的标签内容与显示样式分离的思想 也最易改版维护代码看起来也是最美观的一种。
css 选择器
学习目标 能够说出 css 选择器的种类 1. css 选择器的定义
css 选择器是用来选择标签的选出来以后给标签加样式。
2. css 选择器的种类 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器
3. 标签选择器
根据标签来选择标签以标签开头此种选择器影响范围大一般用来做一些通用设置。
示例代码
style typetext/cssp{color: red;}
/style
divhello/div
phello/p
4. 类选择器
根据类名来选择标签以 . 开头, 一个类选择器可应用于多个标签上一个标签上也可以使用多个类选择器多个类选择器需要使用空格分割应用灵活可复用是css中应用最多的一种选择器。
示例代码
style typetext/css.blue{color:blue}.big{font-size:20px}.box{width:100px;height:100px;background:gold}
/style
div classblue这是一个div/div
h3 classblue big box这是一个标题/h3
p classblue box这是一个段落/p
5. 层级选择器(后代选择器)
根据层级关系选择后代标签以选择器1 选择器2开头主要应用在标签嵌套的结构中减少命名。
示例代码
style typetext/cssdiv p{color: red;}.con{width:300px;height:80px;background:green}.con span{color:red}.con .pink{color:pink}.con .gold{color:gold}
/style
divphello/p
/div
div classconspan哈哈/spana href# classpink百度/aa href# classgold谷歌/a
/div
span你好/span
a href# classpink新浪/a
注意点: 这个层级关系不一定是父子关系也有可能是祖孙关系只要有后代关系都适用于这个层级选择器
6. id选择器
根据id选择标签以#开头, 元素的id名称不能重复所以id选择器只能对应于页面上一个元素不能复用id名一般给程序使用所以不推荐使用id作为选择器。
示例代码
style typetext/css#box{color:red}
/style
p idbox这是一个段落标签/p !-- 对应以上一条样式其它元素不允许应用此样式 --
p这是第二个段落标签/p !-- 无法应用以上样式每个标签只能有唯一的id名 --
p这是第三个段落标签/p !-- 无法应用以上样式每个标签只能有唯一的id名 --
注意点: 虽然给其它标签设置id“box”也可以设置样式但是不推荐这样做因为id是唯一的以后js通过id只能获取一个唯一的标签对象。
7. 组选择器
根据组合的选择器选择不同的标签以 , 分割开, 如果有公共的样式设置可以使用组选择器。
示例代码
style typetext/css/* 定义公共属性 */.box1,.box2,.box3{width:100px;height:100px}/* 定义个性 */.box1{background:red}.box2{background:pink}.box2{background:gold}
/style
div classbox1这是第一个div/div
div classbox2这是第二个div/div
div classbox3这是第三个div/div
8. 伪类选择器
用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器
示例代码
style typetext/css.box1{width:100px;height:100px;background:gold;}.box1:hover{width:300px;}
/style
div classbox1这是第一个div/div
9. 小结 css 选择器就是用来选择标签设置样式的 常用的 css 选择器有六种分别是: 标签选择器 类选择器 层级选择器(后代选择器) id选择器 组选择器 伪类选择器
css 属性
学习目标 能够知道常用的样式属性 我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。
1. 布局常用样式属性 width 设置元素(标签)的宽度如width:100px; height 设置元素(标签)的高度如height:200px; background 设置元素背景色或者背景图片如background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。 border 设置元素四周的边框如border:1px solid black; 设置元素四周边框是1像素宽的黑色实线 以上也可以拆分成四个边的写法分别设置四个边的 border-top 设置顶边边框如border-top:10px solid red; border-left 设置左边边框如border-left:10px solid blue; border-right 设置右边边框如border-right:10px solid green; border-bottom 设置底边边框如border-bottom:10px solid pink;
2. 文本常用样式属性 color 设置文字的颜色如 color:red; font-size 设置文字的大小如font-size:12px; font-family 设置文字的字体如font-family:微软雅黑;为了避免中文字不兼容一般写成font-family:Microsoft Yahei; font-weight 设置文字是否加粗如font-weight:bold; 设置加粗 font-weight:normal 设置不加粗 line-height 设置文字的行高如line-height:24px; 表示文字高度加上文字上下的间距是24px也就是每一行占有的高度是24px text-decoration 设置文字的下划线如text-decoration:none; 将文字下划线去掉 text-align 设置文字水平对齐方式如text-align:center 设置文字水平居中left/center/right) text-indent 设置文字首行缩进如text-indent:24px; 设置文字首行缩进24px
3. 布局常用样式属性示例代码
style
.box1{width: 200px; height: 200px; background:yellow; border: 1px solid black;}
.box2{/* 这里是注释内容 *//* 设置宽度 */width: 100px;/* 设置高度 */height: 100px;/* 设置背景色 */background: red;/* 设置四边边框 *//* border: 10px solid black; */border-top: 10px solid black;border-left: 10px solid black;border-right: 10px solid black;border-bottom: 10px solid black;/* 设置内边距 内容到边框的距离如果设置四边是上右下左 *//* padding: 10px; */padding-left: 10px;padding-top: 10px;/* 设置外边距设置元素边框到外界元素边框的距离 */margin: 10px;/* margin-top: 10px;margin-left: 10px; */float: left;}
.box3{width: 48px; height: 48px; background:pink; border: 1px solid black;float: left;}
/style
div classbox1div classbox2padding 设置元素包含的内容和元素边框的距离/divdiv classbox3/div
/div
4. 文本常用样式属性示例
stylep{/* 设置字体大小 浏览器默认是 16px */font-size:20px;/* 设置字体 */font-family: Microsoft YaHei; /* 设置字体加粗 */font-weight: bold;/* 设置字体颜色 */color: red;/* 增加掉下划线 */text-decoration: underline;/* 设置行高 */line-height: 100px;/* 设置背景色 */background: green;/* 设置文字居中 *//* text-align: center; */text-indent: 40px;}
a{/* 去掉下划线 */text-decoration: none;}
/style
a href#连接标签/a
p你好世界!
/p
5. 小结 设置不同的样式属性会呈现不同网页的显示效果 样式属性的表现形式是: 属性名:属性值;
