濮阳做网站的公司有哪些,网站设计 方案,丈哥seo博客,百度渠道开户哪里找文章目录 前言一、CSS引入方式1.行内操作2.内部操作3.外部操作 二、常用选择器1.标签选择器2.类选择器3.id选择器4.群组选择器5.后代选择器 三、字体常用设置1.字体类型2.字体大小3.字体样式4.字体粗细 四、div盒子模型1.盒子边框2.外边距3.内边距4.浮动 综合实战案例 前言
以… 文章目录 前言一、CSS引入方式1.行内操作2.内部操作3.外部操作 二、常用选择器1.标签选择器2.类选择器3.id选择器4.群组选择器5.后代选择器 三、字体常用设置1.字体类型2.字体大小3.字体样式4.字体粗细 四、div盒子模型1.盒子边框2.外边距3.内边距4.浮动 综合实战案例 前言
以盖房子比喻我们的网页HTML就是房屋主体CSS就是给房屋装修JS就是给房屋买家具今天介绍CSS语法部分。 一、CSS引入方式
1.行内操作
CSS引入方式的第一种是行内操作首先我们先写一组HTML代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleCSS引入/title
/head
bodyp我是P标签 -- 1/p
p我是P标签 -- 2/p
/body
/html运行结果如下
我们会发现字体没有颜色大小也很单调接下来给字体加上颜色及修改大小用到style属性代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleCSS引入/title
/head
body
!--1、行内CSS操作--
p stylecolor: red我是P标签 -- 1/p
p stylecolor: green; font-size: 30px我是P标签 -- 2/p
/body
/html代码运行结果如下
这时候我们也会发现如果要定义的样式非常多写在标签内部就很长很乱代码阅读性很差接下来会用到第二种CSS引入方式。
2.内部操作
内部操作也叫头部操作在head里面使用style标签代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleCSS引入/title!--2、头部CSS操作--stylespan {color: purple;font-family: 宋体;}/style
/head
body
span学习头部CSS操作/span
/body
/html运行后结果如下
假设现在样式标签很多全部都写在该HTML文件中也会显得代码很冗长接下来介绍第三种CSS引入方式。
3.外部操作
外部CSS操作在外部单独新建一个css文件名字随便起比如这里取名为demo.css然后回到HTML文件中继续写代码代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleCSS引入/title!--3、外部CSS操作--link relstylesheet hrefdemo.css
/head
body
!--i标签是斜体标签--
i好好学习天天向上/i
/body
/htmlCSS代码如下
运行HTML代码后结果如下 三种CSS引入方式根据自己喜好选择即可如果项目非常大一定是使用外部CSS引入的方式。
二、常用选择器
选择器就是选中标签的方式分为5种。
1.标签选择器
标签选择器是通过标签名选中标签代码示例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title标签选择器/title!--标签选择器通过标签名选中标签--styleb {color: red;}span {color: green;}/style
/head
body
!--b标签是粗体标签--
b我是b标签 -- 1/b hr
span我是span标签/span hr
b我是b标签 -- 2/b
/body
/html运行后结果如下
2.类选择器
类选择器是通过class属性值选中标签现在有代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title类选择器.: class/titlestylep {color: red;}/style
/head
body
p我是p标签 -- 1/p
p我是p标签 -- 2/p
p我是p标签 -- 3/p
/body
/html运行结果如下
假如我现在只想让标签1和3改变颜色2不变这时候就要对1和3加上属性classclass类用.点指代代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title类选择器.: class/titlestyle.p1 {color: red;}/style
/head
body
p classp1我是p标签 -- 1/p
p我是p标签 -- 2/p
p classp1我是p标签 -- 3/p
/body
/html运行后结果如下 代码做进一步升级
!DOCTYPE html
html langen
headmeta charsetUTF-8title类选择器.: class/titlestyle.p1 {color: red;}/style
/head
body
p classp1我是p标签 -- 1/p
p我是p标签 -- 2/p
p classp1我是p标签 -- 3/p
span classp1我是span -- 3/span
/body
/html这时候span标签的内容也会变颜色因为类选择器选中的是同一类而不管是不是同一种标签运行结果如下
3.id选择器
id选择器用#号来指代代码示例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleid选择器 -- #/titlestyle#p1 {font-size: 20px;color: red;}/style
/head
body
p idp1id选择器 -- 1/p
pid选择器 -- 2/p
pid选择器 -- 3/p
/body
/html运行后结果如下 这时候我们继续修改代码为下面的p标签也设置同样的id和属性值代码如下所示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleid选择器 -- #/titlestyle#p1 {font-size: 20px;color: red;}/style
/head
body
p idp1id选择器 -- 1/p
p idp1id选择器 -- 2/p
pid选择器 -- 3/p
/body
/html但是里面代码很明显是有错误的因为id值是唯一的类似于我们的身份证号码不能有重复的而类class是可以有多个重复的这就是id选择器的特殊之处。
4.群组选择器
群组选择器用,逗号来指代我们来写一组代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title群组选择器 -- ,/titlestylespan {color: red;}p {color: red;}/style
/head
body
span我爱你/span
p好天气/p
/body
/html这组代码实现的功能就是给span标签和p标签内容都改颜色虽然可以实现但是我们会发现代码变的冗长了如果有多个不同标签那么会更长这时候可以使用群组选择器将代码缩短具体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title群组选择器 -- ,/titlestylespan, p {color: green;}/style
/head
body
span我爱你/span
p好天气/p
/body
/html运行后结果如下
5.后代选择器
我们可以看这样一组代码
headmeta charsetUTF-8title后代选择器/titlestylespan {color: red;}/style
/head
body
pa hrefspan学习后代选择器/span/a
/p
span我是span标签/span
/body
/html运行后结果如下 假如我们只想让a标签里面的span标签改变颜色这里就要用到后代选择器当然也可以单独设置id或者class但是我们用后代选择器来看看怎么改代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title后代选择器/titlestylep a span {color: blue;}/style
/head
body
pa hrefspan学习后代选择器/span/a
/p
span我是span标签/span
/body
/html运行后结果如下
三、字体常用设置
1.字体类型
字体类型用font-family属性具体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title字体设置/titlestyle#p1 {/*字体类型*/font-family: 宋体;}/style
/head
body
p idp1学习字体设置/p
/body
/html运行后结果如下 可以继续改为黑体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title字体设置/titlestyle#p1 {/*字体类型*/font-family: 黑体;}/style
/head
body
p idp1学习字体设置/p
/body
/html运行后结果如下
2.字体大小
字体大小用属性font-size具体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title字体设置/titlestyle#p1 {/*字体大小*/font-size: 30px;}/style
/head
body
p idp1学习字体设置/p
/body
/html
运行后结果如下
3.字体样式
字体样式使用属性font-style属性值常用的有italic(斜体)和normal(正常)具体代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title字体设置/titlestyle#p1 {/*字体样式*/font-style: italic;}/style
/head
body
p idp1学习字体设置/p
/body
/html运行后结果如下
4.字体粗细
字体粗细使用font-weight属性常用属性值就是normal(正常)和bold(粗)代码示例如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title字体设置/titlestyle#p1 {/*字体粗细*/font-weight: bold;}/style
/head
body
p idp1学习字体设置/p
/body
/html运行后结果如下
四、div盒子模型
盒子模型就是给网页划分不同区域每个区域有特定的功能盒子里面的标签如果要转移位置只需挪动盒子即可不用一个个标签去挪动说白了就是便于管理。
1.盒子边框
盒子模型的标签是div具体用法代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title盒子边框/titlestylediv {/*盒子宽度width*/width: 200px;/*盒子高度height*/height: 200px;/*盒子边框border*//*border有三个参数粗细 线的类型 颜色*//*线类型有实线(solid) 虚线(dashed) 点线(dotted)*/border: 1px solid red;}/style
/head
body
div/div
/body
/html运行后结果如下
盒子建好之后我们可以在里面写一些标签内容代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title盒子边框/titlestylediv {width: 200px;height: 200px;border: 1px solid red;}/style
/head
body
divp天气真好/pp天气真好/pp天气真好/p
/div
/body
/html运行后结果如下
还可以给盒子添加背景颜色使用background-color属性代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title盒子边框/titlestylediv {width: 200px;height: 200px;border: 1px solid red;background-color: orange;}/style
/head
body
div/div
/body
/html运行后结果如下
2.外边距
接下来看看外边距外边距是盒子与盒子之间的边距以及盒子与浏览器之间的边距我们先创建两个盒子代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title外边距/titlestyle#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;}/style
/head
body
div idd1/divdiv idd2/div
/body
/html运行后结果如下
div标签是默认从上往下展示可以看到两个盒子目前是挨在一起接下来为他们设置边距代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title外边距/titlestyle#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;/*上边距*/margin-top: 50px;/*左边距*/margin-left: 50px;}/style
/head
body
div idd1/divdiv idd2/div
/body
/html运行后结果如下
接下来很关键的是如何让盒子居中这里用到margin属性属性值是auto意思就是自动根据浏览器大小居中显示代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title外边距/titlestyle#d2 {width: 300px;height: 300px;background-color: orange;/*盒子居中*/margin: auto;}/style
/head
body
div idd2/div
/body
/html运行后结果如下
3.内边距
内边距是盒子里面内容与盒子之间的边距可以先看下面这组代码
!DOCTYPE html
html langen
headmeta charsetUTF-8title内边距/titlestyle.d1 {width: 300px;height: 300px;border: 2px solid red;}/style
/head
body
div classd1p学习内边距/p
/div
/body
/html运行后结果如下
接下来把盒子里面内容上下左右距离调整代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title内边距/titlestyle.d1 {width: 300px;height: 300px;border: 2px solid red;/*内容距离盒子上边的边距*/padding-top: 50px;/*内容距离盒子左边的边距*/padding-left: 50px;}/style
/head
body
div classd1p学习内边距/p
/div
/body
/html运行后结果如下 这时候我们会注意到盒子整体变大了这是因为内边距会撑大盒子以保持除开刚才上边和左边撑开的内边距盒子整体大小依然是我们设置的尺寸300px。
4.浮动
浮动就是把原有默认的位置进行移动比如我们上面定义的两个盒子默认是上下挨着展示代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title浮动/titlestyle#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;}/style
/head
body
div idd1/div
div idd2/div
/body
/html运行后结果如下
现在我将下面的盒子位置移动到右边称为浮动用到float属性值为right代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title浮动/titlestyle#d1 {width: 300px;height: 300px;background-color: green;}#d2 {width: 300px;height: 300px;background-color: orange;float: right;}/style
/head
body
div idd1/div
div idd2/div
/body
/html运行后结果如下
综合实战案例
实战案例需求编写注册页面先看效果图如下
附上全部代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title注册页面(案例)/titlestylediv {width: 300px;height: 320px;border: 1px solid grey;border-radius: 5px;border: 1px solid grey;padding: 10px;margin: auto;}span {border-bottom: 5px solid purple;padding-bottom: 6px;}#a1 {float: right;color: deepskyblue;text-decoration: none;}.A {width: 290px;height: 30px;margin-bottom: 8px;border-radius: 5px;border: 1px solid grey;}.B {width: 190px;height: 30px;margin-bottom: 8px;border-radius: 5px;border: 1px solid grey;}.C {width: 90px;height: 30px;border-radius: 5px;border: 1px solid grey;color: purple;}.D {width: 90px;height: 30px;border-radius: 5px;border: 1px solid grey;background-image: url(https://gimg2.baidu.com/image_search/srchttp%3A%2F%2Fzhuangjiba.com%2Fd%2Ffile%2Fhelp%2F2018%2F08%2Fcfdefaddb3f47d78f8c66a7de28720aa.pngreferhttp%3A%2F%2Fzhuangjiba.comapp2002sizef9999,10000qa80n0g0nfmtauto?sec1655473640t3942417cfe379e590c48a9340d06952b);background-size: 85px 30px;vertical-align: middle;}.E {width: 290px;height: 30px;border-radius: 5px;border: 1px solid grey;color: deepskyblue;}/style
/head
bodydivform actionspan请注册/spana ida1 href立即登录/ahrinput typetext placeholder请输入手机号 classA brinput typetext placeholder请输入短信验证码 classBinput typebutton value发送验证码 classC brinput typetext placeholder请输入用户名 classA brinput typepassword placeholder请输入密码 classA brinput typepassword placeholder请再次输入密码 classA brinput typetext placeholder请输入图形验证码 classBinput typebutton classDbrinput typesubmit value立即注册 classE/form
/div
/body
/html
