绥芬河建设工程网站,无锡网站App微信,专业网站建设代理,前端容易被裁还是后端#x1f680; 优质资源分享 #x1f680;
学习路线指引#xff08;点击解锁#xff09;知识定位人群定位#x1f9e1; Python实战微信订餐小程序 #x1f9e1;进阶级本课程是python flask微信小程序的完美结合#xff0c;从项目搭建到腾讯云部署上线#xff0c;打造一… 优质资源分享
学习路线指引点击解锁知识定位人群定位 Python实战微信订餐小程序 进阶级本课程是python flask微信小程序的完美结合从项目搭建到腾讯云部署上线打造一个全栈订餐系统。Python量化交易实战入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统
CSS基本知识点
我们在学习HTML之后前端三件套第二件便是CSS但CSS内容较多我们分几部分讲解
如果没有学习HTML请参考之前文章HTML知识点概括——一篇文章带你完全掌握HTML
CSS作用
如果说HTML为网页提供内容那么CSS就是为内容进行装饰为网页进行布局
CSS可以控制整体框架控制文本字体大小等诸多事宜
CSS语法
CSS基本语法只有一条
选择器 {声明1声明2
}
元素显示模式
首先我稍微解释一下元素显示模式
元素以什么方式进行显示
HTML的元素类型模式
块元素行内元素
我们先讲解一下块元素
块元素包括h标题系列pdivulolli块元素特点包括 自己独占一行高宽外距背景色都可以设置宽度默认为父类是一个容器可以放置行内或行内块元素
我们再来讲解一下行内元素
行内元素包括astrongbemspan行内元素特点包括 相近元素在一行无法设置长宽默认宽度为字宽度行内元素只能容纳文本和其他行内元素
最后我们介绍一下行内块元素
行内块元素包括imginputtd行内块元素特点 一行可有多个行内块元素正常情况宽度为内容宽度可以设置宽度
这些属性并非都是绑定的我们可以通过方法进行转换
displayinline/block/inline-block 分别对应行内元素块元素行内块元素
CSS写入的三种方式
CSS作用HTML中一共有三种方法我们一一介绍
第一种行内样式 直接在单个标签中写入style并进行书写 第二种内部样式 在html文件的head区域写入style进行书写 第三种外部样式 在css文件中书写在html文件中的head区域采用link方法导入link语法
上面三种语法讲究就近原则当前标签距离谁较近就是用哪种css
一般情况行内元素内部样式外部样式
下面给出代码示例
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title导入方法titlestyleh1 {color: aliceblue;}stylelink relstylesheet hrefcss.css
head
bodyh1 stylecolor:aqua;h1
body
html
h1 {color: black;
}
CSS的四种选择器
CSS的基本选择器分为四种 通配符选择器 针对所有标签进行选择 标签选择器 针对所有对应的标签进行选择 类选择器class 针对所有对应class名的所有类标签进行选择一个标签可以具有多个类一个类可以作用于多个标签 id选择器id 针对对应id名的唯一标签进行选择一个标签只能有一个id一个id只能作用于一个标签
三种选择器具有明确的优先级id选择器类选择器标签选择器
下面给出示例代码
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title三种选择器titlestyle/* 1.标签选择器样式 标签名{}自动选中所有标签的代码*/h1 {color: bisque;}p {color: blueviolet;font-size: 30px;}/* 2.类选择器样式.类名{}自动选中所有带类名的代码可以跨标签类名定义用class*/.myStyle {color: blue;font-size: 20px;}/* 3.id选择器样式#id名{}自动选择带有id名的代码注意id具有全局唯一性*/#w123 {color: aquamarine;font-size: 40px;}#w333 {color: aquamarine;font-size: 40px;}/* 4.通配符选择器样式 * {}全部锁定全部标签都带有以上特征*/stylehead
bodyh1标题1h1p我是30px大小的pp classmyStyle 我是类选择器pp idw123我是id选择器pp classmyStyle idw333 我的最高权限是id选择器pp classmyStyle我的最高权限是类选择器p
body
html
折叠 CSS层次选择器
层次选择器分为五种 并集选择器 选择器1选择器2 {}同时选择多个选择器的标签 后代选择器 父 子{}可以选择父类的所有子类标签以及子类标签后的所有标签 子选择器 父子{}只能选择父类的所有子类标签 相邻选择器 .class兄弟标签类型{}只能选择.class的父类的下一个兄弟标签 通用选择器 .class~标签类型{}可以选择.class的父类的下一个之后包括下一个的所有兄弟标签下面给出代码示例
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title层次选择器titlestyle/* 后代选择器 格式父类 父类的后代{}用于父类的后代所有标签内*/ul li{color: rgb(255, 0, 0);}/* 子选择器格式父类 子类{}仅用于父类的下一代*/bodyp{color: aqua;}/* 相邻兄弟选择器格式.class名 同辈标签{}选定class的标签的相邻标签*/.active p {color: black;}/* 通用兄弟选择器格式.class名 ~ 同辈标签{}选定class的标签的以下所有兄弟标签*/.allover ~ p {color: rgb(243, 255, 7);}style
head
bodypp孙子1ppp classactive儿子2pp classallover儿子3pp儿子4pp儿子5pullip我是孙子辈plili我是儿子辈liul
body
html
折叠 结构伪选择器
结构伪选择器主要负责有条件性的标签选择
下面直接给出代码示例
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title结构伪类选择器titlestyle/* 例如我们希望在ul中的第一个和最后一个li中单独进行CSS操作 */ul li:first-child {color: brown;}ul li:last-child {color: red;}/* 这里我们以p的父元素为父类来选择第2个孩子 *//* 我们可以通过nth-childn来选择第n个元素 */p:nth-child(2){color: aquamarine;}/* 这里我们以p的父元素为父类来选择第2个p类型的孩子 *//* 我们可以通过nth-of-typen来选择第n个元素 */p:nth-of-type(2){color: antiquewhite;}/* 同时“”也具有其他性质例如a的hover属性表示当鼠标放在a上时的CSS操作 */a:hover {background-color: black;}style
head
bodya href#123app1ppp2ppp3pullil1lilil2lilil3liul
body
html
CSS属性选择器
属性选择器是CSS3新加入的特性极大程度方便了选择器的利用
属性选择器的格式如下 标签[属性名]{}标签[属性名属性]{}标签[属性名*属性]{}标签[属性名^属性]{}标签[属性名$属性]{}下面给出代码示例
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title属性选择器titlestyle/* 首先我们把下方连接都变成框框以便于效果明显这里后面会涉及目前不需要深究 */.demo a{float: left;display: block;height: 50px;width: 50px;border-radius: 10px;background: #2700ff;text-align: center;color: gray;text-decoration: none;margin-right: 5px;font: bold 20px/50px Arial;}/* 以下操作为防止冲突均以注释格式出现请测试时去除注释 *//* 标签[属性名]{} 该标签内带有该属性的所有标签 .demo a[id]{background: red;} *//* 标签[属性名属性]{} :该标签内带有该属性且属性值对应的所有标签注意需要完全匹配.demo a[idw123]{background-color: aquamarine;}.demo a[classclass1 class2 class3]{background-color: black;}*//* 标签[属性名*属性]{}该标签内带有该属性且属性值对应的所有标签注意存在匹配即可 .demo a[class*class1]{background-color: aqua;}*//* 标签[属性名^属性]{}:该标签内带有该属性且以该属性开头 .demo a[href^https]{background-color: red;}*//* 标签[属性名$属性]{}:该标签内带有该属性且以该属性结尾 .demo a[href$https]{background-color: red;}*/style
head
bodyp classdemoa hrefhttps://www.baidu.com classclass1 class2 class3 idw1231aa hrefhttps://www.taobao.com/ classclass1 class2 class32aa href# classclass1 class2 class33aa href# classclass1 class2 class34aa href# classclass1 class2 idw3215aa href# classclass1 class26aa href# classclass1 class27aa href# classclass18aa href# classclass19aa href# classclass110ap
body
html
折叠 CSS字体样式
我们依次介绍字体样式
font-family: 中文字体英文字体这里设置文本字体可以同时设置英文和中文字体需要用逗号隔开也可以只设置一种font-size: 20px;这里设置文本大小font-weight: bold;这里设置文本粗细可以采用数字px也可以采用bold等font-style:italic;(这里设置文字样式例如italic斜体normal正常)color: brown;这里设置字体颜色font: 粗细 大小 字体;(这里整合所有font设置可以一次性设置完毕)
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title字体样式titlestyle.divclass p{/* 我们常用的字体样式就以下四种 */font-family: 微软雅黑;font-size: 20px;font-weight: bold;color: brown;}style
head
bodydiv classdivclassp123pspan123spandiv
body
html
CSS文本样式
文本样式主要是对文本进行操作大致包括以下五种
颜色color文本对齐text-align首行缩进text-indent行高line-height装饰text-decoration
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title文本样式titlestyle/* 颜色 color 有三种形式 1.直接写英文颜色 red 等2.以#开头写000000~ffffff之间的颜色3.以RBG来写4.以RBGA来写可写透明度*/.class1 {/* 这里之间为大家举例这样书写是不对的 */color: red;color: #121212;color: rgb(0, 255, 255);color:rgba(0, 255, 255, 0.1);}/* 文本对齐 text-align 有三种情况 center 居中对齐left 靠左对齐right 靠右对齐*/.class2 {text-align: center;}/* 首行缩进 text-indent通常采用emem表示一个文字大小常用2em*/.class3 {text-indent: 2em;}/*行高 text-height行高常用来使文字位于框架垂直中心当行高框架高度文字位于垂直中心*/.class4 {background-color: #121212;height: 300px;line-height: 300px;}/*修饰 text-decoration可以跟 none underline line-through overline因为超链接a自带下划线我们常使用none去除下划线使其美观 */a {text-decoration: none;}style
head
bodyp classclass1123pp classclass2123pp classclass3123pp classclass4123pa href#我是链接a
body
html
折叠 CSS超链接伪类
在CSS的超链接中会出现动态情况所以css给出相关伪类来改变超链接各种状态下的形态
下面给出代码示例
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title超链接伪类和阴影titlestyle/* 正常情况下超链接伪类是很丑的且带下划线 *//* 首先我们对a进行修正 */a {/* 取消下划线修改颜色 */text-decoration: none;color: black;}/* 我们来讲解一下a的一些伪类操作 *//* 这里表示当鼠标触及到超链接的状态 */a:hover{color: yellow;} /* 这里表示当鼠标点击超链接且未松开的状态 */a:active{color: green;}/* 这里表示当鼠标未点击超链接的状态可能与a发生冲突尽量不要使用 *//* a:link{color:blue;} *//* 这里表示鼠标已点击过的状态 可能与a发生冲突尽量不要使用*//* a:visited{color:red;} */stylestyle/* text-shadow: 阴影颜色 阴影水平移动大小 阴影垂直移动大小 阴影光晕半径 移动大小是可以写负数的 */#price{text-shadow: blue 10px 10px 2px;}style
head
bodypa href# img src../../../../Resources/picture/1.jpeg alt纱雾老师appa href#纱雾老师appa href# idprice99ap
body
html
折叠 CSS表单常用focus伪选择器
input:focus选择器专用于表单input中用来表示当点击该表单时的标签状态
html
html langen8contentIEedgecontentwidthdevice-width, initial-scale1.0表单选择器span classhljs-comment/* 用来表示选中该input标签时的状态 *//spanspan classhljs-selector-taginput/spanspan classhljs-selector-pseudo:focus/span{span classhljs-attributebackground-color/span: orange;}bodyinput typetextinput type button
body
html
CSS列表简单美化
在css基本课程中我们给出列表的一些简单美化步骤
下面内容稍微阅读理解即可后面我们会给出更加美观详细的步骤
下面给出代码示例
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title简单列表练习titlelink relstylesheet hrefccs.css
head
bodydiv idnavh2淘宝销售h2ullia href#女装anbsp;nbsp;a href#男装anbsp;nbsp;a href#童装anbsp;lilia href#女鞋anbsp;nbsp;a href#男鞋anbsp;nbsp;a href#童鞋anbsp;lilia href#手机anbsp;nbsp;a href#电脑anbsp;nbsp;a href#数码anbsp;liuldiv
body
html
/* 首先设置最上方标题 */
h2{background-color: blanchedalmond;font-size: 20px;font-weight: bold;text-indent: 2em;line-height: 35px;
}/* 然后我们设置盒子大小 */
#nav {width: 300px;background-color: gray;
}/* 然后我们对li做出调整 */
ul li{/* 首先我们去掉前方的索引号 list-style:none 无circle 空心圆decimal 数字square 方形*/list-style: none;height: 30px;text-indent: 1em;
}/* 最后我们设置a和ahover */
a {text-decoration: none;color:black;font-size: 14px;
}a:hover{color: orange;
}
CSS背景
CSS背景主要分为两部分
背景颜色背景图片
我们的解释主要围绕这两部分展开
html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title背景titlestyle/* 背景颜色background-color: transparent*//* 背景图片background-image: none/url(图片地址) 背景图片可以选择其展示样式background-repeat选择是否平铺repeat平铺 no-repeat不平铺 repeat-x水平平铺 repeat-y垂直平铺背景图片可以选择位置background-positionx y选择xy位置xtop/center/bottom yleft/center/right背景图片可以选择是否固定background-attachment选择背景图片是否固定scroll可滚动 fixed固定背景图片具有复合写法background颜色 地址 平铺 是否固定 位置背景图片可选择透明度backgroundrgbaaa是透明度*/style
head
bodydiv idnavdiv
body
html
结束语
关于CSS的基本知识点我们就简单介绍到这里后面我会逐渐更新CSS三大特性盒子浮动等内容请多多关注谢谢
