HTML+CSS入门 CSS样式表学习
沉沙 2018-09-17 来源 : 阅读 1078 评论 0

摘要:本篇教程介绍了HTML+CSS入门 CSS样式表学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门 CSS样式表学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门。

<

2.1样式表的基本概论
 
2.1.1  内联样式表
在标签中直接添加style       例:<p style=“”>  </p>
 
2.1.2  内嵌样式表
作为一个独立区域内嵌在网页内,必须卸载head标签内
例:<head>
         <style=“”>
         </style>
     </head>
 
2.1.3  外部样式表
即css样式表,需要新建一个css文件,用来放样式表。如果在html文件中调用样式表,需在html文件中点击  右键→CSS样式→附加样式表。(一般用link连接方式)
注:有些标签会有默认的边距,一般写代码的时候会先去除(也可以设置其他需要的样式)
*                       (对所有标签起作用)
{margin:0px;    (边距)
padding:0px;}   (间距)
 
2.2  选择器
 
1、标签选择器
p{样式}   该样式对所有未加其他引用的p标签起作用
 
2、class选择器
在样式表中写法都是以 “.” 开头,引用时为class=“”
例:
样式表中   .a{样式}
引用时     <div class=“a”></div>
 
3、id选择器
在样式表中写法都是以 “#” 开头,引用时为id=“”
例:
样式表中   #a{样式}
引用时     <div id=“a”></div>
注:id引用时在代码中只能使用一次,而class可以无限次引用
 
4、复合选择器
 
① 在样式表中两个标签用 “,” 隔开,表示并列
例:
p,span{样式}     表示p和span两者同样的样式
 
② 用空格隔开,表示后代
例:
.main p{样式}     找到使用main样式的标签,在该标签内的p标签使用该样式
③ 筛选  用 “.” 隔开
例:
p.sp{样式}     在标签p中的class=“sp”的标签执行该样式
 
2.3  样式属性
 
背景
backround-color:                      背景颜色,样式表优先级高
backround-image:url(路径)      设置背景图片(默认)
backround-attachment:fixed      背景固定,不随字体滚动
                                :scroll      背景随字体滚动
backround-repeat:no-repeat      不平铺
                         :repeat           平铺
                         :repeat-x        横向平铺
                         :repeat-y        纵向平铺
backround-position:center         背景图居中(设置背景图片位置时repeat必须为“no-repreat”)  
                           :right top      背景图片放在右上角(位置可以自己改)
                           :left 100px top 100px      距离左边和上边的距离(可以为负值)
字体
font-family:“字体”        设置字体
font-size:12px           字体大小,也可以用“2.5em”  即默认字体的2.5倍  也可以用百分数
font-weight:hold        加粗
                :normal     正常
font-style:italic           倾斜
              :normal       不倾斜
color:                        颜色
test-decoration:underline     下划线
                      :overline       上划线
                      :line-through   删除线
                      :none           去掉下划线
test-align:center          水平居中对齐
              :left             水平左对齐
              :right           水平右对齐
vertical-align:middle     垂直居中对齐
                  :top         顶对齐
                  :botton    低对齐(一般设置行高后使用)
text-indent:20px        首行缩进
line-height:20px         行高(一般为1.5-2倍字体大小)
display:none              不显示
          :inline-block     显示为块,不自动换行,宽高可设(black显示为块,自动换行。inline效果同span标签类似,不自动换行,宽高不可设)
visibility(可视性):hidden          隐藏(但是占空间,只是不可见)
                         :visible           显示
 
其他样式
当设置了.a后还可以添加其他几种效果
a:link{样式}         正常状态是的样式
a:visited{样式}     点击后的样式(一般都是与link样式一样,否则会出现显示错误)
a:hover{样式}     鼠标悬停时的样式
a:active{样式}     点击时的样式
 
边界和边框
margin          表外间距
padding        内容与单元格间距
border:                              表格和边框的样式
border:5px solid blue          四边框:5像素粗、实线、蓝色
border-width:5px               5像素粗
border-style:solid               实线
border-color:blue               蓝色
border-top:5px solid blue   上边框5像素粗、实线、蓝色
margin:10px                      四边外边框为10像素
          :auto                      居中
margin-top:10px               上边外边框为10px
margin:20px 10px 20px 10px    上-右-下-左  分别设置四个边框,数据顺序为顺时针
 
2.4  格式与布局
position:fixed         锁定位置(相对于浏览器的位置),列如某些网站右下角的弹窗
           :sbsolute    外层没有position:sbsolute(或relative)那么div相对于浏览器定位。外层有position:sbsolute(或relative)那么div相对于外层边框定位
           :relative      相对于默认位置的移动(也就是实际视觉效果是位移,而后台位置还是在原始位置)
 z-index:2              相对于z轴拉近2层位置
float:left               位于左侧浮动
      :right             位于右侧浮动
overflow:hidden     隐藏超出部分
            :visible      显示超出部分
            :scroll       显示出滚动条
cursor:pointer        鼠标悬停时的形状
opacity:0.5            透明度为半透明    

本文由职坐标整理发布,欢迎关注职坐标WEB前端HTML/CSS频道,获取更多HTML/CSS知识!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程