html5网站开发案例,申请个人网址,成都网站关键词,珠海市今天刚刚发生的新闻文章目录 1. CSS 是什么2. CSS 引入方式2.1 内部样式2.2 外部样式2.3 内联样式 3. CSS 常见选择器3.1 基础选择器3.1.1 标签选择器3.1.2 类选择器3.1.3 id 选择器3.1.4 通配符选择器 3.2 复合选择器3.2.1 后代选择器 4. CSS 常用属性4.1 字体相关4.2 文本相关4.3 背景相关4.4 设… 文章目录 1. CSS 是什么2. CSS 引入方式2.1 内部样式2.2 外部样式2.3 内联样式 3. CSS 常见选择器3.1 基础选择器3.1.1 标签选择器3.1.2 类选择器3.1.3 id 选择器3.1.4 通配符选择器 3.2 复合选择器3.2.1 后代选择器 4. CSS 常用属性4.1 字体相关4.2 文本相关4.3 背景相关4.4 设置圆角矩形 5. 块级元素与行内元素5.1 定义5.2 区别 6. CSS 盒子模型6.1 边框属性6.2 内边距6.3 外边距 7. 弹性布局 1. CSS 是什么
【CSS 含义】层叠样式表英文全称 —— Cascading Style Sheets
层叠式样表听起来比较高大上我们对此进行拆分理解 1层叠指的是针对一个 html 的元素或者标签可以同时应用多组 CSS 样式多组样式叠加在一起 2样式大小、位置、间距、颜色、字体、边框、背景等等统称为样式描述了一个网页长的样子
【CSS 作用】CSS 能够对网页中元素的位置进行排版对像素级精准控制实现美化页面的效果能够做到页面的样式和结构分离
上期内容我们学习了 HTML 的基本用法可以实现简单的页面但是不是很好看有很多细节可以去调整使页面变得漂亮起来这时CSS 闪亮登场啦它就起到美化页面的效果
2. CSS 引入方式
CSS 和 HTML 类似也是在浏览器中运行的在编写代码的时候CSS 有多种引入方式如下
2.1 内部样式
【内部样式】直接把 CSS 嵌入到 HTML 中放在 style 标签里面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/titlestylediv {font-size: 50px;color: green;}/style
/head
bodydivhello/div
/body
/html效果如下 图解说明 【优点】能够使样式和页面结构分离 【缺点】但是分离的还不够彻底尤其是 CSS 内容多的时候
2.2 外部样式
【外部样式】把 CSS 写成一个单独的 .css 文件由 html 文件通过 link 标签引入
创建一个 css 文件使用 link 标签引入 css 文件
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/titlelink relstylesheet href style.css
/head
bodydivhello/div
/body
/htmlstyle.css 文件内容如下
div {font-size: 100px;color:red;
}效果如下 图解说明 【优点】样式和页面结构彻底分离 【缺点】但是受到浏览器缓存影响修改之后不一定立刻生效(可能需要一定的时间)
2.3 内联样式
【内联样式】直接把 CSS 属性写到元素的 style 属性内
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv stylecolor: blueviolet; font-size: 200px;hello/div
/body
/html效果如下 图解说明 【优点】写法简单 【缺点】只适合于写简单样式只针对某个标签生效 即不能写太复杂的样式
上述三种写法在实际开发中都十分常见在本期内容主要使用内部样式来介绍 CSS
3. CSS 常见选择器
【选择器含义】针对页面中指定的标签元素生效先要选中元素才能设置元素的属性 【选择器种类】选择器有很多种分为 1基础选择器由单个选择器构成 2复合选择器由多种基础选择器构成
CSS 选择器种类非常多用法也是十分丰富本期内容仅介绍 5 种选择器如下
3.1 基础选择器
3.1.1 标签选择器
【特点】使用标签名把页面中所有同名标签的元素都选中即能快速为同一类型的标签都选择出来 【缺点】难以针对某个元素进行个性化定制即不能差异化选择
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/titlestylediv {font-size: 50px;color: green;}/style
/head
bodydivhello1/divdivhello2/divdivhello3/div/body
/html效果如下 图解说明 3.1.2 类选择器
【特点】CSS中创建一个类名这个类名对应一组 CSS 属性让指定的 html 元素应用这个类名即可使用 【优点】能够差异化表示不同的标签
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello1/divdiv classtwohello2/divstyle.one {color: red;font-size: 100px;}.two {color: green;font-size: 100px;}
/body
/html效果如下 图解说明 【注意】这里的类和 Java 中的类完全没有任何联系~ 这里的一个类名是可以被多个标签引用同时一个标签还可以引入多个类名使用多组属性多个类名之间使用空格分隔
3.1.3 id 选择器
【特点】一个 html 标签可以有一个 id 属性id 是唯一的这个 id 属性的值作为标签的身份标识因此同样可以通过 id 选择器把这个指定的元素给获取到
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv id mydivhello/divstyle#mydiv {color:rebeccapurple;font-style:100px;}/style
/body
/html效果如下 图解说明 【注意】因为 id 是唯一的即不能被多个标签使用 (这也是类选择器最大的区别)!!!
3.1.4 通配符选择器
【特点】选择所有的标签页面的所有内容均修改无需被页面结构调用
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydivhello/divh2hhh2style* {color: red;}/style
/body
/html效果如下 图解说明 3.2 复合选择器
在本期内容中仅介绍一种复合选择器后代选择器
3.2.1 后代选择器
【特点】后代选择器的效果就是把上述的三种基础选择器进行组合同时能够体现出标签的层次结构 【优点】如果有一个页面特别复杂就可以使用后代选择器非常针对性地修改某元素并不影响其它部分内容
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classoneh3hello1h3/divdiv classtwoh3hello2h3/divdiv classoneh2hello3h2/divstyle.one h3{color: red;}.two h3{color: green;}/style
/body
/html效果如下 图解说明
【关于优先级】 CSS里面有一套优先级规则但是比较麻烦需要进行计算我们作为了解在这里不进行介绍 1引用样式可以简单地理解内联样式这种优先级比其它两种更高会覆盖其他的样式 2类选择器针对同样的样式属性设置不同的值使用类选择器的优先级高于标签选择器
4. CSS 常用属性
CSS中有非常多的属性这里仅介绍常用的属性详情可以参考CSS参考手册
4.1 字体相关
1字体家族font-family 2字体大小font-size 3字体粗细font-weight 4设置文字倾斜font-style
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello/divstyle.one {font-family: 宋体;/*字体大小*/font-size: 100px;/*字体粗细*/font-weight: 900;/*设置文字倾斜*/font-style: italic;}/style
/body
/html效果如下
4.2 文本相关
1文本颜色color
【注意】color 属性的值有很多种写法
直接写一些表示颜色的单词日常用到的颜色这里都有如color:red;使用 rgb 的方式表示如color:rgb(255,0,0)使用十六进制方式表示本质上仍然是 RGB如color #ff0000; 通过上述的操作可以调出一些很好看的颜色啦~
2文本对齐方式text-align 其中左对齐为 left右对齐为 right居中对齐center
3文本装饰(加个下划线等)text-decoration 加下划线设置为 underline比如这个链接你不想加下划线该属性的值可以设置为 none
4行间距(行高)line-height
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello/divstyle.one {font-size: 100px;/* 文本颜色 */color: #ff0000;/* 文本对齐 左对齐left 右对齐right 居中对齐center */text-align: center;/* 文本装饰 加个下划线等 */text-decoration: underline;/* 文本缩进 首行缩进多少空间 */text-indent: 20px;/* 行高 行间距*/line-height: 100px;}/style
/body
/html效果如下 4.3 背景相关
1背景颜色background-color 2背景图片background-image: url(图片地址); 3背景平铺方式background-repeat 4背景位置background-position 5背景大小background-size
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello/divstyle.one {font-size: 100px;background-color: #ff0000;/* 设置图片的宽与高 */width: 600px;height: 300px;background-image: url(dog.jpg);background-repeat: no-repeat;background-position: center center;/* 与图片背景颜色大小一致所以没有看到背景颜色 */background-size: 600px,300px;}/style
/body
/html效果如下 4.4 设置圆角矩形
圆角矩阵border-radius
效果如下
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello/divstyle.one {width: 600px;height: 300px;background-color: gray;border-radius: 50px;text-align: center;}/style
/body
/html效果如下 如果想要得到一个圆形呢可以做到吗 即在正方形中将 border-radius 的长度设置为正方形边长的一半即可
width: 400px;
height: 400px;
border-radius: 200px;效果如下 5. 块级元素与行内元素
5.1 定义
【块级元素】矩形的盒子 【行内元素】一段文本
每个 html 元素均可以通过 CSS 设置 display 属性
display:block; 块级元素
display:inline; 行内元素上期前端专栏介绍的 html 标签在不显示指定 display 的时候均有默认的 display 的值 其中默认为 block(块级元素) 的标签有h1-h6pulollitablediv等等 默认为 inline(行内元素) 的标签有aspanb
5.2 区别
块级元素与行内元素的区别有很多方面主要了解两个方面
块级元素默认独占一行行内元素默认不独占一行块级元素可以设置尺寸比如可以设置 width、height 的值而行内元素不可以!
可以通过 display:block将 span 标签设置为块级元素因为 span 标签默认是行内元素改为块级元素后 span 标签也可以设置尺寸了
但是一般不会把块级元素变成行内元素~没啥意义hh
也可以使用display:none 实现元素隐藏的效果
6. CSS 盒子模型
一个 html 元素是一个矩形这个矩形由以下 4 个部分构成内容 内边距 边框 外边距如图
6.1 边框属性
边框属性border
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello/divstyle.one {width: 500px;height: 300px;/* 边框可以分开设置 分成4个方向*/border-left: red 20px solid;border-right: green 20px dotted;border-top: blue 20px dashed;border-bottom: orange 20px solid; }/style
/body
/html效果如下选中该元素查看信息 通过上图发现我们在代码中设置的是 500 * 300但是这里的尺寸显示的是 540 * 340
这里是因为边框把元素给撑大了边框一个是 20px所以宽与高均增大了 40px
但是在开发的时候一般不希望见到这种情况如果需要排列多个元素的时候此时就不安排了因此一般希望边框不要撑大元素可以使用一个单独的 CSS 属性进行设置box-sizing: border-box;
此时选择通配符选择器设置这个属性~ 因为我希望的是所有的边框不要撑大元素
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello/divstyle*{box-sizing: border-box;}.one {width: 500px;height: 300px;/* 边框可以分开设置 分成4个方向*/border-left: red 20px solid;border-right: green 20px dotted;border-top: blue 20px dashed;border-bottom: orange 20px solid; }/style
/body
/html效果如下此时元素就没有被边框撑大啦 6.2 内边距
内边距属性padding 即元素和边框之间的距离
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello/divstyle*{box-sizing: border-box;}.one {width: 500px;height: 300px;/* 边框可以分开设置 分成4个方向*/border-left: red 20px solid;border-right: green 20px dotted;border-top: blue 20px dashed;border-bottom: orange 20px solid;/* padding也是可以分4个方向设置 */padding-left: 20px;padding-right:20px;padding-top: 50px;/* 上下设置 30px 左右设置 20px *//* padding: 30px 20px; *//* 上右下左 顺时针*//* padding: 10px 20px 30px 40px; */}/style
/body
/html效果如下 【注意】padding 这个本身使用并不复杂主要是如何设置 padding 比较好看~
6.3 外边距
外边距属性margin 即边框和其它元素之间的距离
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonehello/divstyle*{box-sizing: border-box;}.one {width: 500px;height: 300px;/* 边框可以分开设置 分成4个方向*/border-left: red 20px solid;border-right: green 20px dotted;border-top: blue 20px dashed;border-bottom: orange 20px solid;/* padding也是可以分4个方向设置 */padding-left: 20px;padding-right:20px;padding-top: 50px;/* 上下设置 30px 左右设置 20px *//* padding: 30px 20px; *//* 上右下左 顺时针*//* padding: 10px 20px 30px 40px; */margin-top: 50px; }/style
/body
/html效果如下 【注意】 将 margin 设置为 auto可以实现元素水平居中的效果但是把上下方向设置为 auto 则不能实现垂直居中 即将 margin 设置 auto 可以实现水平居中但是垂直方向则不行 【除浏览器默认样式】 不同浏览器的默认样式存在差别有的浏览器会给元素加上一些默认的样式尤其是内外边距为了保证代码在不同的浏览器上都能按照统一的样式显示往往我们会去除浏览器默认样式
使用通配符选择器设置内外边距均为 0即可完成去除浏览器默认样式代码如下
* {marign: 0;padding: 0;
}7. 弹性布局
对于块级元素我们知道默认是独占一行的即为垂直方向排列的有时候想让块级元素能够水平方向排列如何做呢
有的小伙伴会想到使用行内元素这就可以水平排列了但是行内元素不能设置尺寸呀!!!
这个时候弹性布局闪亮登场!!! 可以让块级元素水平排列
本期内容仅介绍弹性布局最基础的三个属性
开启弹性布局display:flex 其中 flex 即为弹性布局某元素一旦开启了弹性布局此时内部的子元素就会按照水平方向排列但是子元素里面的子元素是不受影响的!!!设置水平方向排列规则justify-content有居中排列靠左靠右分散开等设置垂直方向排列规则align-items
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleCSS/title
/head
bodydiv classonediv classtwo1/divdiv classtwo2/divdiv classtwo3/divdiv classtwo4/divdiv classtwo5/div/divstyle*{box-sizing: border-box;}.one {width:1000px;height: 300px;background-color: gray;display: flex;justify-content:space-around;align-items: center;}.two {width: 150px;height: 100px;background-color: green;}/style
/body
/html效果如下实现了块级元素水平排列
