静安做网站,湖南企业网站制作公司,wordpress 调用自定义栏目,wordpress 头部导航栏文章目录 CSS 常见的属性CSS 常见样式行内样式内嵌样式导入样式 CSS 选择器标签选择器id选择器类选择器全局选择器属性选择器组合选择器 CSS 常见应用表格列表导航栏下拉菜单提示工具图片廊 CSS (Cascading Style Sheets#xff0c;层叠样式表#xff09;#xff0c;是一种用… 文章目录 CSS 常见的属性CSS 常见样式行内样式内嵌样式导入样式 CSS 选择器标签选择器id选择器类选择器全局选择器属性选择器组合选择器 CSS 常见应用表格列表导航栏下拉菜单提示工具图片廊 CSS (Cascading Style Sheets层叠样式表是一种用来为结构化文档如 HTML 文档或 XML 应用添加样式字体、间距和颜色等的计算机语言CSS文件扩展名为 .css。CSS是用于控制网页样式并允许将样式信息和网页分离的一种标记语言。
该样式定义了如何显示 HTML 元素通过使用 CSS 我们可以大大提升网页开发的工作效率
CSS语法格式CSS声明总是以分号 ; 结束声明总以大括号 {}括起来:
标签名
{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;...
}
选择器一般放在head的style/style元素中。
CSS 常见的属性
字体属性
font-family设置字体类型如font-size: “宋体”。font-size设置字体大小px 为像素em 自动使用大小方便放大缩小字体一般使用em1em16px。font-style设置字体风格样式normal 为正常italic 为倾斜oblique 也为倾斜。font-weight设置字体粗细normal 为正常bold 为加粗lighter 为变细。
文本属性
text-decoration对文本进行装饰none 为正常overline 为上滑线underline 为下滑线line-through 为删除线。text-indent文本缩进中文一般为2em。text-align对齐方式left 为左对齐right 为右对齐center 居中对齐justify 两端对齐。text-transform大小写字母转换uppercase 为大写lowercase 为小写capitalize 为首字母大写。direction文本方向rtl 为右对齐ltr 为左对齐也是默认值。color文本颜色。letter-spacing设置字符间距normal 为正常还有如2px。word-spacing设置单词间距normal 为正常还有如30px。
尺寸属性
height设置元素的高度默认auto还有如100px。width设置元素的宽度默认auto还有如100px。line-height设置行高默认normal还有如200%。
背景属性
background-color设置元素背景色。background-size设置背景大小。background-image把图像设置为背景。 url(‘URL’) URL为图像地址。linear-gradient() 渐变如linear-gradient(blue, red)为垂直从上到下渐变linear-gradient(to right, red , yellow) 为水平从左到右渐变linear-gradient(to bottom right, red , yellow) 为从左上角到右下角渐变。radial-gradient() 径向渐变如radial-gradient(red, yellow, green)为椭圆渐变radial-gradient(circle, red, yellow, green)为圆渐变。 background-position设置背景的位置。background-repeat设置如何重复背景图像默认repeat为水平和垂直方向重复no-repeat不重复。background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。默认scroll为随着页面的滚动而滚动fixed 为不会随着页面的滚动而滚动local 为随着元素内容的滚动而滚动。
CSS 常见样式
行内样式
只能用于当前标签。可以直接在标签中添加属性style。
!DOCTYPE html
html
headmeta charsetutf-8title行内样式/title
/head
body
!--设置背景为红色字体颜色为黑色字体大小为20--
p stylebackground-color: red;color: black;font-size: 20px;Python网络爬虫/p
!--设置字体颜色为蓝色字体为italic形式--
p stylecolor: blue;font-style: italic;Python网络爬虫/p
/body
/html内嵌样式
只能用于当前页面。内嵌样式就是在head标签中使用style标签将所有css代码集中在一个区域中实现了html和css代码分离方便后期维护。
!DOCTYPE html
html
headmeta charsetutf-8title内嵌样式/titlestylebody {background-color: yellow;}/*格式要求一样可以合并写逗号分割*/.test1,#test2 {color: red;font-size: 50px;text-align: center;}/style
/head
body
div classtest1Python网络爬虫/div
div idtest2Python网络爬虫/div
/body
/html导入样式
可以同时作用于多个页面。
不用对每个页面写style标签直接导入CSS文件即可基本形式为link href”css文件路径” type”MIME类型” rel”stylesheet”。
type 参数根据格式选择如文本”text/css”JS为“ext/javascript“图片为”image/jpg“所有图片为”image/*“。
创建一个css文件如下1.css
body {background-color: yellow;
}/*格式要求一样可以合并写逗号分割*/
.test1, #test2 {color: red;font-size: 50px;text-align: center;
}再创建html文件导入css文件。
!DOCTYPE html
html
headmeta charsetutf-8title导入样式1/titlelink href1.css typetext/css relstylesheet
/head
body
div classtest1Python网络爬虫/div
div idtest2Python网络爬虫/div
/body
/html需要写style标签将css样式导入style中。
!DOCTYPE html
html
headmeta charsetutf-8title导入样式1/titlestyle/*import url(1.css);*/import 1.css;/style
/head
body
div classtest1Python网络爬虫/div
div idtest2Python网络爬虫/div
/body
/htmlCSS 选择器
标签选择器
p {color: red;text-align: center;
}p 为标签选择器color 是颜色属性red为属性值text-align是文本位置属性center表示居中。
id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。
!DOCTYPE html
html
headmeta charsetutf-8title菜鸟教程(runoob.com)/titlestyle#para1 {text-align: center;color: red;}/style
/headbody
p idpara1Hello World!/p
p这个段落不受该样式的影响。/p
/body
/htmlID属性不要以数字开头数字开头的ID在浏览器中不起作用。 类选择器
class 选择器用于描述一组元素的样式class 选择器有别于id选择器class可以在多个元素中使用。class 选择器在 HTML 中以 class 属性表示, 在 CSS 中类选择器以一个点 . 号显示。
.test1 {color: red;text-align: center;}全局选择器
全局选择器顾名思义就是对所有标签做相同的修改用*号显示。
* {color: green;text-align: center;}属性选择器
属性选择器可以根据元素的属性及属性值来选择两种方式标签名[属性值]或标签名[属性名属性值]。
p[class] {color: green;text-align: center;}p[classtest1] {color: green;text-align: center;}组合选择器
常见有四种组合方式的选择器。
后代选择器(以空格 分隔)子元素选择器(以大于号分隔相邻兄弟选择器以加号分隔普通兄弟选择器以波浪号分隔
div p
{background-color:yellow;
}divp
{background-color:yellow;
}divp
{background-color:yellow;
}div~p
{background-color:yellow;
}CSS 常见应用
表格
新建一个tb.css文件可设置如下表格样式
/*表格边框指定黑色边框*/
table, th, td {border: 1px solid black;
}/*表格宽度和高度设置100%宽度50像素的th元素的高度*/
table {width: 100%;
}th, td {height: 50px;
}/*表格文字对齐水平对齐垂直对齐*/
th, td {text-align: right;height: 50px;vertical-align: bottom;
}/*表格填充控制边框和表格内容直接的间距*/
th {padding: 15px;
}/*表格颜色*/
table, th, td {border: 1px solid green;
}
th {background-color: green;color: white;
}再将tb.css导入到html文件中
!DOCTYPE html
html
headmeta charsetutf-8title表格/titlestyleimport tb.css;/style
/head
body
tabletrthFirstname/ththLastname/ththSavings/th/trtrtdPeter/tdtdGriffin/tdtd$100/td/trtrtdLois/tdtdGriffin/tdtd$150/td/trtrtdJoe/tdtdSwanson/tdtd$300/td/trtrtdCleveland/tdtdBrown/tdtd$250/td/tr
/table
/body
/html由示例可见和之前html语法类似只不过增加了一些css表格样式设置页面整体看起来也更加美观。
列表
新建一个list.css文件可设置如下列表样式
/*圆形*/
ul.a {list-style-type: circle;
}
/*方形*/
ul.b {list-style-type: square;
}
/*罗马数字I、II*/
ol.c {list-style-type: upper-roman;
}
/*小写字母a、b*/
ol.d {list-style-type: lower-alpha;
}再将list.css导入到html文件中
!DOCTYPE html
html
headmeta charsetutf-8titlePython学习路线/titlestyleimport list.css;/style
/headbody
p无序列表:/p
ul classaliPython基础知识/liliPython数据分析/liliPython网络爬虫/li
/ul
ul classbliPython基础知识/liliPython数据分析/liliPython网络爬虫/li
/ulp有序列表:/p
ol classcliPython基础知识/liliPython数据分析/liliPython网络爬虫/li
/ol
ol classdliPython基础知识/liliPython数据分析/liliPython网络爬虫/li
/ol
/body
/html导航栏
新建一个appbar.css文件可设置如下样式
/*固定导航条位置头部对应top:0尾部bottom:0*/
ul {list-style-type: none;margin: 0;padding: 0;overflow: hidden;background-color: #333;position: fixed;top: 0;width: 100%;
}
/*链接左对齐*/
li {float: left;
}
/*设置链接颜色及样式*/
li a {display: block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;
}
/*鼠标移动到选项上修改背景颜色*/
li a:hover:not(.active) {background-color: #111;color: gray;
}/*激活当前导航条实例*/
.active {background-color: #4CAF50;
}再将appbar.css导入到html文件中
!DOCTYPE html
html
headmeta charsetutf-8titleSkill/titlestyleimport appbar.css;/style
/head
body
ullia classactive href#MysqlMysql/a/lilia href#PythonPython/a/lilia href#HtmlHtml/a/lilia href#CssCss/a/lilia href#JavascriptJavascript/a/lilia href#JavaJava/a/lilia href#CC/a/lilia href#CC/a/lilia href#GoGo/a/li
/ul
div stylepadding:20px;margin-top:30px;background-color: redh1nbsp;/h1h1nbsp;/h1h1 styletext-align: centerNo permission.../h1h1nbsp;/h1h1nbsp;/h1
/div
/body
/html下拉菜单
这里将css格式内嵌到html文件中示例如下
!DOCTYPE html
html
headmeta charsetutf-8titleSkill/titlestyle/*下拉按钮样式*/
.dropbtn {background-color: #4CAF50;color: white;padding: 16px;font-size: 16px;border: none;cursor: pointer;
}
/*容器div 需要定位下拉内容*/
.dropdown {position: relative;display: inline-block;
}
/*下拉内容默认隐藏*/
.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
/*下拉菜单的链接*/
.dropdown-content a {color: black;padding: 12px 16px;text-decoration: none;display: block;
}
/*当下拉内容显示后修改下拉按钮的背景颜色*/
.dropdown-content a:hover {background-color: #f1f1f1}
/*在鼠标移上去后显示下拉菜单*/
.dropdown:hover .dropdown-content {display: block;
}
/*当下拉内容显示后修改下拉按钮的背景颜色*/
.dropdown:hover .dropbtn {background-color: #3e8e41;
}/style
/head
body
div classdropdownbutton classdropbtn技能下拉选择/buttondiv classdropdown-contenta href#PythonPython/aa href#HtmlHtml/aa href#CssCss/aa href#JavaJava/a/div
/div
/body
/html提示工具
应用示例如下
!DOCTYPE html
html
headmeta charsetutf-8title提示工具/title
/head
style/* Tooltip 容器*/.tooltip {position: relative;display: inline-block;border-bottom: 1px dotted black;}.tooltip .tooltiptext {visibility: hidden;width: 120px;background-color: black;color: #fff;text-align: center;border-radius: 6px;padding: 5px 0;position: absolute;z-index: 1;top: -5px;right: 110%;}.tooltip .tooltiptext::after {content: ;position: absolute;top: 50%;left: 100%;margin-top: -5px;border-width: 5px;border-style: solid;border-color: transparent transparent transparent black;}/*鼠标移动上去后显示提示框*/.tooltip:hover .tooltiptext {visibility: visible;}
/style
body styletext-align:center;h2左侧提示框/右侧箭头/h2div classtooltip鼠标移动到我这span classtooltiptext快来点我啊/span
/div/body
/html图片廊
制作一个照片墙鼠标移动到照片时会放大。
!DOCTYPE html
html
headmeta charsetutf-8title照片墙/title
/head
style#box {width: 80%;background-color: orange;/*内容居中显示*/margin: 0 auto;}#box img {width: 200px;height: 250px;margin: 30px;/*设置旋转的起点*/transform-origin: center;/*设置过度时间*/transition-duration: 2s;transition-property: all;}#box img:nth-child(1){transform: rotate(20deg);}#box img:nth-child(1){transform: rotate(20deg);}#box img:nth-child(2){transform: rotate(-20deg);}#box img:nth-child(3){transform: rotate(20deg);}#box img:nth-child(4){transform: rotate(-20deg);}#box img:nth-child(5){transform: rotate(20deg);}#box img:nth-child(6){transform: rotate(-20deg);}#box img:nth-child(7){transform: rotate(20deg);}#box img:nth-child(8){transform: rotate(-20deg);}#box img:hover{transform:rotate(30deg) scale(1.5);border: 1px solid #777;}
/style
bodydiv idboximg src下午 趴在桌子的女孩4k动漫壁纸3840x216020.jpgimg src冬季雪地汉服美女4k壁纸3840x216018.jpgimg src动漫美女 鲜花 帽子 唯美 好看 4K壁纸16.jpgimg src吞噬星空4K高清壁纸10.jpgimg src宁安如梦 白鹿 古装剧照 4k壁纸17.jpgimg src银河星空一个人风景4K壁纸16.jpg
/div/body
/html
