动漫设计工作室网站推广方法,公司做网站的费用记什么科目,自己搭建网站,厦门网站建设 php定义#xff1a;层叠样式表 Cascading Style Sheets#xff0c;控制页面的展示效果
1.基本语法规范
选择器 1/n条声明
选择器决定针对谁修改声明决定修改啥声明的属性是键值对#xff0c;使用 ; 区分键值对#xff0c;使用 : 区分键和值
2.格式
style标签可放在head标…定义层叠样式表 Cascading Style Sheets控制页面的展示效果
1.基本语法规范
选择器 1/n条声明
选择器决定针对谁修改声明决定修改啥声明的属性是键值对使用 ; 区分键值对使用 : 区分键和值
2.格式
style标签可放在head标签通常或body标签中也可放在两标签之间
stylep {color: red;font-size: 40px;}
/style
3.引入方式
内部样式表
通过style标签将css嵌套到html页面中上方格式中的代码就采用这种方式
优点让样式和页面结构分离
缺点分离的不够彻底尤其是css内容多的时候
行内样式表
h1 stylecolor: blue; font-size: 20pxc;你好/h1
行内样式表优先级高于内部样式表
外部样式表
创建一个.css文件在head标签中使用link标签引入css
link relstylesheet href/demo.css
4.选择器
4.1基础选择器
1 标签选择器格式中的代码即是标签选择器
2 类选择器差异化表示不同的标签多个类名用于样式叠加
p classeat food吃饭/p
p classsleep睡觉/p
.eat { ……}
.food { ……}
.sleep { ……}
3 id选择器#开头
p idfe前端开发/p
p idserver后端开发/p
#fe { ……}
#server{ ……}
4 通配符选择器使用 * 选取所有标签在实际应用开发中用来针对页面中所有元素默认样式进行消除主要用来消除边距
* {colorred;}
4.2复合选择器
1 后代选择器又叫包含选择器选择某个父元素中的某个子元素
ol li {color: red;}
ulli吃饭/lili睡觉/li
/ulolli吃饭/lili睡觉/li
/ol
2 伪类选择器定义元素状态
a:link选择未被访问过的链接a:visited选择已被访问过的链接a:hover选择鼠标指针悬停上的链接a:active选择活动链接鼠标按下了但未弹起
a {color:black;}
a:hover {color:red;}
a:active {color:green;}input {color:blue;}
input:hover {color:black;}
input:active {color:red;}
a herf#不跳转/a
br
input typebutton value按钮
5.常用元素属性
5.1字体属性
外观多个字体用逗号分隔从左到右查找字体找不到则使用默认字体
!--style在head标签中--
stylediv {font-family: Microsoft YaHei;font-size: 60px;}
/stylebodydiv微软雅黑/div
/body
颜色三种表示方法单词、十六进制形式、RGB方式
stylediv {color:red;color:#ff0000;color:rgb(255,0,0);}
/stylebodydiv红色/div
/body
粗细normal (默认 400)、bold (粗体 700)、bolder (更粗)、lighter (更细)、inherit (继承父元素)
stylediv { font-weight: bolder;font-weight: 300;}
/stylebodydiv粗体/div
/body
样式normal (默认)、italic (斜体)、oblique (倾斜)、inherit (继承父元素)
stylediv { /* 设置倾斜 */font-style: italic;/* 取消倾斜 */font-style: normal;}
/stylebodydiv倾斜/div
/body
5.2文本属性
位置left、center、right
styleh1 {text-align: left;}h2 {text-align: center;}h3 {text-align: right;}
/stylebodyh1靠左/h1h2居中/h2h3靠右/h3
/body
缩进单位使用 px 或 em一个 em 就是当前元素的文字大小缩进可以是负的表示向左缩进
* lorem生成长文字
stylediv {text-indent: 20px;}p {text-indent: -2em;}
/stylebodydivLorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quas accusamus unde ut vel aliquid similique quaerat obcaecati mollitia quis eaque neque veritatis temporibus, porro modi debitis molestias! Consectetur, obcaecati./divpLorem ipsum dolor sit amet consectetur adipisicing elit. Placeat quas accusamus unde ut vel aliquid similique quaerat obcaecati mollitia quis eaque neque veritatis temporibus, porro modi debitis molestias! Consectetur, obcaecati./p
/body
装饰 underline (下划线)、overline (上划线)、line-through (删除线)、none (啥都没有可给a标签去掉下划线)
stylediv {text-decoration: underline;}p {text-decoration: line-through;}a {text-decoration: none;}
/stylebodydivhello world/divpdelete/pa href#不跳转/a
/body
行间距上下文本行之间的基线距离
基准线顶线、中线、基线、底线
stylep {line-height:40px;}
/stylebodypLorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio perspiciatis deleniti, sit doloribus quia perferendis eaque nobis. Optio quos tenetur suscipit in expedita at odio architecto, libero illum quo error!Lorem/p
/body
5.3背景属性
颜色同字体
stylediv {background-color: aqua;}p {/* 背景透明 */background-color: transparent;}
/style
图片 URL可以加引号也可不加
stylediv {background-image: url(abc.jpg);height: 300px;}
/style
平铺repeat (平铺 默认)、no-repeat (不平铺)、repeat-x (水平平铺)、repeat-y (垂直平铺)
stylediv {background-image: url(rose.jpg);background-repeat: repeat-x;}
/style
位置相当于坐标轴 (x, y)
方位名词topleftrightbottom精确单位坐标或百分比以左上角为原点混合单位同时包含方位名词和精确单位
stylediv {background-image: url(flower.jpg);background-position: top;background-position: 200px,200px; background-position: 100px,center;}
/style
尺寸
具体尺寸20px 30px表示宽度 高度百分比按照父元素尺寸设计cover使背景图像完全覆盖背景区域contain覆盖并使图像宽度高度完全适应内容区域
stylediv {background-image: url(tree.jpg);background-size: 300px 400px;background-size: contain;}
/style
5.4文本框属性
使边框带圆角效果length是内切圆的半径数值越大弧线越强烈
圆形使length的值为正方形边长的一半圆角矩形使length的值为矩形高度的一半
stylediv {width: 200px;height: 200px;border: 2px green solid;border-radius: 50%;}
/style
还可以对四个角分别设置
stylediv {border-top-left-radius: 2em;border-top-right-radius: 2em;border-bottom-left-radius: 2em;border-bottom-left-radius: 2em;!-- 顺时针 --/* border-radius: 10px 20px 30px 40px; */}
/style
6.元素的显示模式
6.1块级元素
h1-h6 p div ul ol ……
6.2行内元素
a img ……
我们要做到是将行内元素与块级元素之间的转换
displayblock 改成块级元素displayinline 改成行内元素displayinline-block 改成行内块元素
stylea {/* 使两个a标签分别占用一行 */display: block; }
/stylebodya href#链接1/aa href#链接2/a
/body
7.盒模型
每一个Html元素相当于一个矩形的盒子
构成边框border内容content内边距padding外边距margin
7.1边框
粗细border-width样式border-style 默认无边框solid (实线)dashed (虚线)dotted (点线)颜色border-color
层叠性依据就近原则
stylediv {width: 200px;height: 100px;border-width: 10px;border-style: solid;border-color: green;/* 支持混写没有顺序要求 */border: 2px dotted red;/* 可改变四个方向的边框 */border-top: 3px;border-left: 4px;}
/style
浏览器默认边框会撑大“盒子”可使用box-sizing修改浏览器的行为
* {box-sizing: border-box;}
7.2内边距
默认内容是顶着边框放置的使用padding可控制这个距离
可给四个方向上都加上边距padding-top/bottom/left/right
stylediv {width: 200px;height: 100px;padding-left: 5px;padding-bottom: 3px;/* 混合写法 */padding: 5px; /*四个方向都是5px*/padding: 5px 10px; /*上下内边距5px,左右内边距10px*/padding: 2px 5px 10px; /*上内边距2px,左右内边距5px,下内边距10px*/padding: 2px 5px 10px 20px; /*上右下左 顺时针*/}
/style
7.3外边距
控制盒子和盒子之间的距离
可给四个方向上都加上边距margin-top/bottom/left/right
stylediv {border: solid 10px red;margin-top: 2px;margin-bottom: 2px;/*混合写法同内边距padding*//*块级元素水平居中*/margin: auto;margin-right: auto;margin-left: auto;}
/style
8.弹性布局
flex item可以纵向排列也可横向排列称为flex direction (主轴)
justify-content设置主轴上的子元素排列方式 。start (居左 默认)、end (居右)、center (居 中)、space-between (均匀分布)align-items设置侧轴上的子元素排列方式。start (居上 默认)、end (居下)、center (居 中)、space-between (均匀分布)
stylediv {height: 300px;width: 400px;background-color: green;display: flex; /*弹性布局*/justify-content: center; /*主轴*/align-items: end; /*侧轴*/}div span {height: 100px;width: 100px;background-color: red;}
/stylebodydivspan1/spanspan2/spanspan3/span/div
/body
