公园网站建设方案,网络推广员的工作内容,上海哪家seo公司好,哪个公司做公司网站好欢迎大家来到我的博客~欢迎大家对我的博客提出指导#xff0c;有错误的地方会改进的哦~点击这里了解更多内容 目录 一、什么是CSS?二、基本语法规范三、CSS选择器3.1 标签选择器3.2 id选择器3.3 class选择器3.4 通配符选择器3.5 复合选择器 四、常用CSS样式4.1 color4.2 font… 欢迎大家来到我的博客~欢迎大家对我的博客提出指导有错误的地方会改进的哦·~点击这里了解更多内容 目录 一、什么是CSS?二、基本语法规范三、CSS选择器3.1 标签选择器3.2 id选择器3.3 class选择器3.4 通配符选择器3.5 复合选择器 四、常用CSS样式4.1 color4.2 font-size4.3 border4.4 background-color4.5 改变显示模式4.6 padding4.7 margin 一、什么是CSS? CSS(Cascading Style Sheet)层叠样式表, 用于控制页面的样式。 CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。 CSS 可以理解为东方四大邪术 之化妆术. 即对页面的展示进行化妆“。 CSS前 VS CSS修饰后的效果展示 二、基本语法规范
选择器 {⼀条/N条声明} • 选择器决定针对谁修改 (找谁) • 声明决定修改啥. (干啥) • 声明的属性是键值对. 使用; 区分键值对, 使用: 区分键和值。 CSS 要写到 style 标签中 CSS有3种引入方式 行内样式, 只适合于写简单样式. 只针对某个标签⽣效. 缺点是不能写太复杂的样式.
body
div stylecolor:green;我是一个行内样式的div/div
div我是一个div/div
div我是一个div/div
div我是一个div/div
/body内部样式会出现大量的代码冗余, 不方便后期的维护所以不常用。 定义 stylediv{color:red;/style3.外部样式html和css实现了完全分离 link relstylesheet hrefstyle.css然后再创建一个CSS文件然后在这个style.css文件里面写,代码如下 div{color:blue;}上面三个的整体代码
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd
html
headtitleDocument/titlestylediv{color:red;/stylelink relstylesheet hrefstyle.css
/head
body
div stylecolor:green;我是一个行内样式的div/div
div我是一个div/div
div我是一个div/div
div我是一个div/div
/body
/html效果
注意;这个里面的行内样式优先相当于局部变量所以显示的是绿色其他的全局被设置变成了蓝色。 三、CSS选择器 CSS 选择器的主要功能就是选中页面指定的标签元素. 选中了元素, 才可以设置元素的属性.。 3.1 标签选择器
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd
html
headtitleDocument/title
!-- 标签选择器--stylediv{color:red;}p{color:brown;}span{color:blue;}/style
/head
body
div我是一个div/div
p我是一个段落/p
span我是一个span/span
/body
/html这里的这些div,span,p等等标签可以通过style然后定义选择他的颜色。
效果如下 3.2 id选择器 在上面的标签选择器的基础上面然后通过对标签再增加一个属性id唯一 然后就可以根据id去选择,这个样子就叫做id选择器。 举个例子我们先看一段代码和效果
!DOCTYPE HTML PUBLIC -//W3C//DTD HTML 4.01 Transitional//ENhttp://www.w3.org/TR/html4/loose.dtd
html
headtitleDocument/titlestylediv{color:red;}/style/head
body
div我是一个div1/div
div我是一个div2/div
div我是一个div3/div
/body
/html效果 上面一段代码的效果如上图我们如果想要第二个红色的字体变成蓝色字体这个要怎么办呢那么就要用到id选择器。
html
headtitleDocument/titlestylediv{color:red;}#div2{color:blue;}/style/head
body
div iddiv1我是一个div1/div
div iddiv2我是一个div2/div
div iddiv3我是一个div3/div
/body
/html效果 可以看到现在已经变成蓝色了。 注意 这个id要有独特性不能有相同的id,然后这个id选择器使用时候要在前面加# 。 3.3 class选择器 作用:可以把一些有关联起来的东西用同一个class名字,然后他们就会变成一组然后class选择器对一个整大组进行渲染。 举个例子我们把第一个和第三个用class选择器进行渲染
html
headtitleDocument/titlestylediv{color:red;}#div2{color:blue;}.fun1{font-size:40px;}/style/head
body
div iddiv1classfun1我是一个div1/div
div iddiv2classfun我是一个div2/div
div iddiv3classfun1我是一个div3/div
/body
/html效果
注意使用class渲染时候,语法格式如下
.class的赋值 {
}3.4 通配符选择器 对全部class进行渲染 语法
*{}效果同上。 3.5 复合选择器 可以多个选择器一起 举一个例子把两个id选择器放在一起
html
headtitleDocument/titlestylediv{color:red;}#div1,#div2{color:blue;}/style/head
body
div iddiv1classfun1我是一个div1/div
div iddiv2classfun我是一个div2/div
div iddiv3classfun1我是一个div3/div
/body
/html效果 再举一个例子 想要上面的字体变成红色。
html
headtitle复合选择器/titlestyleul li{color:red;}/style
/head
bodyulli无序1/lili无序2/lili无序3/lili无序4/li/ul
olli有序 1/lili有序 2/lili有序 3/lili有序 4/li
/ol
/body
/html效果 复合选择器是由多个单选择器组合id选择器、class选择器多个选择器之间用空格隔开。 四、常用CSS样式
4.1 color color设置颜色 • 英文单词,如red,blue div{color:red;}• rgb代码的颜色 如rgb(255,0,0) div{color:rgb(24,46,37);}• 十六进制的颜色 如#ff00ff div{color:#ff00ff;}4.2 font-size 设置字体大小 ul li{color:red;font-size:60px;}效果 4.3 border CSS border 属性允许您指定元素边框的样式、宽度和颜色。 !DOCTYPE html
html
head
style
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
/style
/head
bodyh1border-style 属性/h1p此属性规定要显示的边框类型/pp classdotted点状边框。/p
p classdashed虚线边框。/p
p classsolid实线边框。/p
p classdouble双线边框。/p
p classgroove凹槽边框。/p
p classridge垄状边框。/p
p classinset3D inset 边框。/p
p classoutset3D outset 边框。/p
p classnone无边框。/p
p classhidden隐藏边框。/p
p classmix混合边框。/p/body
/html效果 border的复合属性 ul li{border:red 1px solid;}在 CSS 中还有一些属性可用于指定每个边框顶部、右侧、底部和左侧/ html
head
style
p {border-top-style: dotted;border-right-style: solid;border-bottom-style: dotted;border-left-style: solid;
}
/style
/head
bodyh1单独的边框/h1p两种不同的边框样式。/p/body
/htmlborder-color属性 html
head
style
p.one {border-style: solid;border-color: red green blue yellow; /* 上红、右绿、下蓝、左黄 */
}
/style
/head
bodyh1border-color 属性/h1pborder-color 属性可接受一到四个值依次对应上、右、下、左边框/pp classone多色的实线边框/p/body
/html
效果 4.4 background-color 设置背景颜色。 html
headtitle边框/titlestyleul li{border:red 1px solid;background-color:blue;}/style
/head
bodyulli无序1/lili无序2/lili无序3/lili无序4/li/ul
/body
/html4.5 改变显示模式 使用display 属性可以修改元素的显示模式。 • display: block 改成块级元素 [常用] • display: inline 改成行内元素 [很少用] 行内元素不能使用width和height,比如pan标签
html
headtitle边框/titlestyle#fun1{width:50px;height:100px;border:1px red solid;}/style
/head
bodyspan idfun1我是一个span/span
/body
/html效果 如果想要用width/height的话就要用到display。
html
headtitle边框/titlestyle#fun1{display:block;width:50px;height:100px;border:1px red solid;}/style
/head
bodyspan idfun1我是一个span/span
/body
/html效果 4.6 padding padding 属性用于在任何定义的边界内的元素内容周围生成空间。 Padding - 单独的边 CSS 拥有用于为元素的每一侧指定内边距的属性 padding-toppadding-rightpadding-bottonpadding-left 所有内边距属性都可以设置以下值 length - 以 px、pt、cm 等单位指定内边距 % - 指定以包含元素宽度的百分比计的内边距 inherit - 指定应从父元素继承内边距 提示不允许负值。 !DOCTYPE html
html
head
style
div {border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;
}
/style
/head
bodyh1使用单独的内边距属性/h1div这个 div 元素的上内边距是 50px右内边距是 30px下内边距是 50px左内边距是 80px。/div/body
/html效果 4.7 margin CSS margin 属性用于在任何定义的边框之外为元素周围创建空间。 !DOCTYPE html
html
head
style
div {border: 1px solid black;margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;
}
/style
/head
bodyh1使用单独的外边距属性/h1div这个 div 元素的上外边距为 100 像素右外边距是 150 像素下外边距是 100 像素左外边距是 80 像素。/div/body
/html效果 欧耶我学会啦
