建设一个网站的一般过程,网站建设奖项,dedecms手机网站仿制,排名优化公司案例目录 一.什么是CSS
编辑二.语法规则:
三.使用方式
1.行内样式:
2.内部样式:
3.外部样式:
空格规范 :
四.CSS选择器类型
1.标签选择器
2.类选择器
3.ID选择器
4.通配符选择器
5.复合选择器
五.常用的CSS样式
1.color:设置字体颜色
2.font-size:设置字体大小
3…目录 一.什么是CSS
编辑二.语法规则:
三.使用方式
1.行内样式:
2.内部样式:
3.外部样式:
空格规范 :
四.CSS选择器类型
1.标签选择器
2.类选择器
3.ID选择器
4.通配符选择器
5.复合选择器
五.常用的CSS样式
1.color:设置字体颜色
2.font-size:设置字体大小
3.border:边框
4.width:设置宽度,height:设置高度
改变显⽰模式
5.padding:设置内边距
6.margin:设置外边距 一.什么是CSS
CSSCascading Style Sheet 层叠样式表,⽤于控制⻚⾯的样式.
CSS能够对⽹⻚中元素位置的排版进⾏像素级精确控制,实现美化⻚⾯的效果.能够做到⻚⾯的样式和 结构分离。
CSS前-CSS 后:
二.语法规则: 选择器{声明内容} 选择器:决定针对哪块修改(找谁)
声明内容:决定修改成什么(干什么)
声明的属性是 键值对,用分号 ; 来分隔键值对用冒号 : 来区分键和值.
注意:
CSS要写在style标签中;
style标签可以放到⻚⾯任意位置.⼀般放到head标签内. CSS使⽤ /**/作为注释.(使⽤ctrl/快速切换)
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/titlestyleh1{color:red;width:500px;}/style
/head
bodyh1好好学习/h1
/body
三.使用方式
CSS有三种使用方式:
1.行内样式:
在标签内 使⽤style属性属性值是css属性键 值对 !-- 行内样式 --div stylecolor:red好好学习/div
特点:行内样式会引入大量的代码,使代码看起来很乱,因此不常用
2.内部样式:
定义style标签,在标签内部定义CSS样式.
styleh1{...}/style特点:适用于简单的样式实现, 只针对某个标签⽣效.缺点是不能写太复杂的样式.
3.外部样式:
定义标签link通过 href属性引⼊外部css ⽂件 特点:html和CSS实现完全分离,常用于企业开发中.
样式不区分大小写,常用于小写.
空格规范 :
冒号后⾯带空格
选择器和 { 之间也有⼀个空格.
四.CSS选择器类型
1.标签选择器
根据标签对所选内容进行样式设置。 2.类选择器
通过在标签中添加属性class 类名,通过.类名 进行选择设置属性. 类选择器可以同名,是用来对一类标签进行样式设置的;类名不能是单独的数字,不能是标签名等特殊字符.
3.ID选择器
通过在标签中添加属性 id ID名,通过 #ID名 进行选择设置属性. id 是唯⼀的,不能被多个标签使⽤ID名不允许同名,不能是标签名等特殊字符.
4.通配符选择器
使用 * 用来设置页面的所有内容. 5.复合选择器
通过空格分隔进行多重选择,选择到要设置的内容 1. 以上三个标签选择器ul li h1 中的任意,都可以替换成类选择器,或者id选择器,可以是任意选 择器的组合,也可以是任意数量选择器的组合
2. 不⼀定是相邻的标签,也可以是孙⼦标签 3. 如果需要选择多种标签,可以使⽤ , 分割,如p, div { } 表⽰同时选中p标签和div标签.逗号前后可以是以上任意选择器,也可以是选择器的组合.
五.常用的CSS样式
1.color:设置字体颜色
颜色表达方式:
1.直接写颜色英文单词:
2.rgb代码的颜色:
rgb代表红绿蓝三原色,通过比例的设置选择颜色.
3.16进制表示:
16进制表示的原理还是rgb,每两个16进制代表一个rgb颜色.
2.font-size:设置字体大小 3.border:边框
border是一个符合属性,可同时设置多个属性,边框宽度,边框颜色,边框形状,不分先后顺序,浏览器可以自己识别. 也可以拆开来设置:
样式作用取值border-width设置边框粗细数值border-color设置边框颜色同colorborder-style设置边框形状 dotted:点状 solid:实线 double:双线 dashed:虚线
上面的代码,等同于下面的代码: 4.width:设置宽度,height:设置高度
注意:只有块级元素才能设置宽度和高度.
块级元素是HTML标签的⼀种显⽰模式,对应的还有⾏内元素
常⻅块级元素:h1-h6,p,div等 常⻅⾏内元素:a span
改变显⽰模式
使⽤display属性可以修改元素的显⽰模式.
display: block 改成块级元素
display: inline 改成⾏内元素 5.padding:设置内边距
padding用来设置内容和边距的距离内容默认是顶着边框来放置的.⽤padding来控制这个距离 padding也是一个复合样式,可以对四个边分别设置:
padding-top:上边距
padding-left:左边距
padding-right:右边距
padding-bottom:下边距
6.margin:设置外边距
margin:设置元素和元素之间的距离. margin也是⼀个复合样式,可以给四个⽅向都加上外边距 margin-top
margin-bottom margin-left
margin-right
上面的内边距和外边距都是相对的,要根据所设置的对象来确认内外边距.
