wap手机网站源码,长沙旅游,com域名注册1元,简单网站建设培训中心什么是css#xff1f;css的作用是什么#xff1f;
CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式#xff0c;搭建页面结构#xff0c;比如设置元素的宽高大小#xff0c;颜色#xff0c;位置等等。
学习css之前先了解一下css代码在HTML中的…
什么是csscss的作用是什么
CSS 指层叠样式表 (Cascading Style Sheets)主要作用就是给HTML结构添加样式搭建页面结构比如设置元素的宽高大小颜色位置等等。
学习css之前先了解一下css代码在HTML中的书写位置。 样式名称 存放位置 使用范围 应用 嵌套样式 head中的title下面 当前样式所处的页面 存放当前页面会用到的样式 行内样式 标签中通过style设置样式 只作用于当前标签 很少使用(一般可以临时使用) 外联样式 存放于其他文本中使用时通过link标签引用 所有的页面都可以引用 存放一些所有页面都会用到的公共样式
css代码书写位置有三种形式
1第一种用style标签包裹。通常放在HTML的head标签里。
style
div{width: 100px;height: 100px;border: 10px solid red;margin: 0 auto;}
/style
2第二种嵌套在HTML代码的行内。比如div style”color : red ;font-size : 20px”/div。这种形式现在不常用现在提倡结构与样式分离的写法。 3第三种写在 .css文件里通过在HTML加入link标签进行引入。
link relstylesheet hrefcss/index.css
练习的时候可以都尝试一下实际项目中多数用第三种写法。
在我看来css基础内容其实就五大部分。
第一部分盒模型
盒模型顾名思义可以想象为我们生活中的一个纸盒子或木盒子。
它有三个属性分别为marginpaddingborder
margin指盒子的外边距padding指大盒子内边与盒子内容的距离border就指盒子的边框。不理解的可以看下图 块级元素都可以看做是一个盒子。
既然提到了块级元素那就顺便说一说HTML元素的三种类型。改属性由css中的display属性控制。
display:block;块级元素。在浏览器内独占一行可以设置宽高。代表元素h1pdiv等。
display:Inline-block;行内块级元素可以设置宽高一行可以同时存在多个。代表元素img,input。
display:Inline;行内元素不可以设置宽高大小由内容决定。代表元素a,b,span等
但是这三种类型是可以通过display属性设定的。以上举例只是该元素的默认display属性。 其实一个网页就是由一个个大小不同的盒子构成的。通过对盒模型的学习为后面搭建页面结构奠定基础。
第二部分基础选择器
选择器又是什么为什么要学习选择器
个人理解要对HTML标签结构进行样式修饰必须先找到要修饰的标签。选择器的作用就是帮助我们选择获取我们要进行样式修饰的HTML标签。
Css中常用的基础选择器有七种
1标签选择器
标签选择器的名字就是选择器名。
写法如下
标签名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
........
}
作用会将所有的这类标签都加上相同的css属性
2类选择器
类名是由标签的class属性进行定义的。
写法如下类名前面需要加上一个点
.类名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
........
}
作用会选择到页面上所有拥有这个类名的元素
3id选择器
id名是由标签的id属性进行定义的。
写法如下id名前面需要加上一个井号。
#id名{
属性1:属性值1;
属性2:属性值2;
属性3:属性值3;
...........
}
作用元素的id值是唯一的只能对应于文档中某一个具体的元素。 将拥有这个id名的唯一元素加上css样式。
补充
1、id选择器与类选择器的区别 a、id选择器 相当于人的身份证 一个id名只能设置给一个元素并且元素只能有一个id b、class类选择器 相当于人的名字会有重名的现象。
多个元素可以设置同样的class 一个元素也能有多个不同的class名
2 、id选择器与类class选择器的命名规则 2.1、命名的取值规范只能是0-9a-zA-Z_- 2.2、不能以数字开头
4并集选择器
作用将两种类型的元素全部选择出来。
多个选择器用逗号隔开代码
选择器1 选择器2
属性名1属性值1;
属性名2属性值2;
....... 5交集选择器
作用从两个集合中选择中它们相同部分
多个选择器紧挨着写代码
选择器1选择器2 { 属性名1属性值1; 属性名2属性值2; .......
}
6后代选择器
作用选择一个标签中所有后代标签里满足条件的标签。
代码 选择器空格选择器 选择器 属性名1属性值1; 属性名2属性值2; ....... 7子代选择器
作用得到 当前标签中的直接子元素直接放在标签下面没有经过任何标签的嵌套
多个选择器用右尖括号连接代码
选择器选择器 属性名1属性值1; 属性名2属性值2; ....... 8通配符
*
作用用于作用于页面上所有的标签.
代码
style * { 属性名1属性值1; 属性名2属性值2; .......
}
/style
注意通配符在进行选择的时候会去遍历页面上所有的标签并且给这些标签设置对应的属性。 更多的css3选择器后续再做补充。
选择器的概念讲完了我们就可以通过选择器对HTML元素设置样式了。
不同的选择器会有不同的应用场合只能在练习中慢慢体会了。
选择器的权重
学到了选择器还不得不说一下权重的问题了。
不同选择器的优先级是不同的对同一个属性设置不同的值优先级高的选择器设置的样式会把优先级低的层叠掉。这也就是css的特性之一层叠性。
同时css还有一个特性称为继承性。也就是说对某个父元素设置了css属性其子元素没有进行设置这时候默认会继承父元素的属性。
优先级
important行内样式id选择器类选择器标签选择器通配符浏览器默认样式继承
important 的优先级最高实际用的不是太多一般会在调试代码时用到。用的时候直接写到要作用的属性值后面。但是请注意!important属性无法继承。
div { color: red !important; }
行内样式优先级其次在css代码书写位置时已经讲过就是将css直接以属性的形式写在HTML标签里。
Id选择器类选择器标签选择器通配符继承这些上面都说过了。
还有一个浏览器默认样式不同的标签浏览器会有给个默认的样式比如a标签默认会有一个下划线颜色是蓝色的等。
计算组合选择器的权重(0,0,0,0)(improtant,id选择器,类选择器,标签选择器)
0000》第一个0对应的是important的个数第二个0对应的是id选择器的个数第三个0对应的类选择器的个数第四个0对应的是标签选择器的个数就是当前选择器的权重。
规则1. 先看有没有选中如果选中了那么以id数类数标签数来计权重。谁大听谁的。如果都一样听后写的为准。2. 如果没有选中那么权重是0。如果大家都是0就近原则。 注意选择器的工作原理选择器在查找元素的时候不是从左往右找而是从右往左找。 OK到这里css的选择器部分算是讲完了学习完选择器我们就可以对元素进行样式修饰了如何修饰请看下面常用样式修饰部分。
第三部分 常用样式修饰
常用样式设置
1尺寸大小widthheight
对于一个元素我们可以通过它的宽高widthheight来设定它的大小。注意属性值的单位是像素px也可以用百分比的形式。
如下div{ width200px; height: 100px;
}
div{ width80%; height: 100%;
} 2 背景background
背景相关的属性
background-image:设置背景图片。写法background-image:url(图片的路径);//默认情况下图片如果比容器要小它会平铺。
background-repeat:设置背景是否平铺
取值
no-repeat:不平铺
repeat-x在水平方向上平铺
repeat-y:在垂直方向上平铺
repeat:平铺
background-position:设置背景图片的位置
用法
background-postion: x y;
注意x,y可以是具体的数值
x,y又可以是一些英文单词。
x: left 左 center 中 right 右
y: top 上 center 中 bottom下
背景的连写方式
background: background-color background-image background-repeat background-position;
3 字体font
字体样式相关的属性
font-size: 18px; 字体大小
font-weight: bold或者normal或者100-900的整数; 字体粗细
font-family: 微软雅黑; 字体类型
font-style: normal或者italic; 字体样式
Font的连写方式
Font-size 和font-family 必须写
Font:Font-style font-weight font-size font-family; 4 文本text
text-align用于设定文字的对齐方式
有三种方式
left 内容左对齐。
center 内容居中对齐。
right 内容右对齐。
text-indent:用于文字缩进。属性值可直接用像素值px表示。
text-decoration: 用于修饰文本none | underline | overline | line-through
none
指定文字无装饰
underline
指定文字的装饰是下划线
overline
指定文字的装饰是上划线
line-through
指定文字的装饰是贯穿线
line-height定义行高。
word-spacing 定义单词间的空白即字间隔。
p { word-spacing:25px; }
5 颜色color
有3种定义颜色的形式
1 颜色关键字表示法可直接用英文单词来定义比如redbluegreen等。
2 16进制表示法用#000000到#ffffff区间内的16进制数来表示。
3 三原色表示法rgbrgb,其中r,g,b分别代表红色绿色蓝色取值范围为0到255.
6 边框border
border有三个属性宽度样式颜色。常用样式分为solid实线dashed虚线dotted点线double双线轮廓
border:1px solid red;这是border的复合写法。也可以分开来写
border-width: 5px;
border-style: dashed;
border-corlor: #ccc;
此外。四个边也可以分别进行修饰如border-topborder-bottomborder-leftborder-right
分别对应上下左右四个边。
7marginpadding
margin和padding的样式设置基本相同。可以给四个边设置同一个值也可以对四个方向进行分别设置如margin-toppadding-left等数值可以是像素px也可以是百分比。
值得注意的一点是margin可以为负值而padding不可以。
8列表样式list-style
经常会用到的就是清除列表的默认样式list-stylenone
list-style-image:url(skin/ico.png); 设置列表前面的小图标
9超链接样式
链接的四种状态
a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻
其他样式的设置可以查阅w3school的css教程。
以上部分只是我在工作中经常用到的最基本的样式设置肯定不够全面在这里只是针对入门级的同学。如果想了解更多还请查阅http://www.w3school.com.cn/css/index.asp 版权所有如需转载请注明出处。
