CSS 

cascading（层叠） style（样式） sheet（表）

css注释

/* 注释内容 */     快捷键:ctrl ?

引入方式

 <!-- 1.行间样式 -->

    <div style="width:100px;height:100px;"></div>

 <!-- 2.页面集 -->

<head>

    <style>

        div{

        background-color: red;

        height: 100px;

        width: 100px; }

        </style>

</head>

 <!-- 3.外部css文件(另建css文件) -->

    <link rel="stylesheet" href="css文件路径" >

css选择器　　

  •  基本选择器

    元素选择器  div{  }
    
id选择器   #demo  在html中(id="demo")
    
类选择器   .demo  在html中(class="demo")
    
通用选择器  *{   }
  • 组合选择器

    后代选择器    div a     找div下所有的a
    
直接子元素选择器 div>a  只找下一代a
    
兄弟选择器   div.a       只找下一个兄弟
    
弟弟选择器   div~a       找到所有兄弟
    
属性选择器   [title]
    
分组选择器   demo1，demo2
    
伪类选择器   a:link a:visited a:hover a:sctive input:focus
    
伪元素选择器 p::before p::after    伪元素存在任意一个元素里面

 css权重

！important            infinity

行间样式

id

class/属性/伪类选择器

标签选择器/伪元素

通配符

 css常用属性

  •  字体属性
font-size:12px;   (规定文本的字体尺寸。设置的是字体高)

font-weight:bold;  (规定字体的粗细。相当于strong，加粗)   100-900

           lighter（更细）/ normal（默认值，标准粗细）/ bolder（更粗）

font-style:italic  (规定文本的字体样式。相当于em，斜体)

font-family:arial； (规定文本的字体系列。)
  • 颜色设置
1.纯英文单词  red/black

2.颜色代码   #000000(#000)白色  #ffffff(#fff)黑色

光学三原色：红绿蓝

美学三原色：红黄蓝

3.颜色函数

rgba (255,255,255,0.3)   数值在0-255   0.3透明度

       r   g   b

    00-ff 00-ff 00-ff
  • 边框设置
border:1px solid black ;
       1px:边框      solid:展示形式    black边框颜色
      boeder-width  border-style     border-color
                    dotted:点状虚线
                    dashed:条状虚线
border-radius:50%;   ⚪     控制圆角
  • 文字常用设置
text-align:center;  文字水平对齐

                        right/left

line-height:10px;   行间距

单行文本垂直居中 ： height =line-height（容器高度=文本高度）

文字行高1.2倍 ：line-height:1.2em;

行高4种方式：

 line-height:normal;  默认方式

1. line-height:1.5;

2. line-height:200%;

3. line-height:10px;

4. line-height:5em;
  • a标签 text-decoration:line-though; 穿过文本的一条线 none 无线 underline 下划线 overline 上划线 curson:pointer; 手 鼠标放在上面的图样 help; ？ e-risize; → move; +
  • display 标签类型的转换
标签
  • inline 行级元素 内容决定元素所占位置大小，不可以通过css改变宽高，具有文字特性。eg：span\strong\em\a\del...
  • block 块级元素 独占一行，可以通过css改变宽高。eg: div\p\ul\ol\li\form\h1-h6...
  • inline-block 行级块元素 内容决定大小可以改变宽高。eg: img
  • 块级元素可以嵌套某些块级元素和行级元素，行级元素可以嵌套行级元素。 p标签不可以嵌套p标签，也不可以嵌套块级元素。a标签不能嵌套a标签

盒模型

1. 盒子壁     border

2. 内边距     padding

3. 盒子内容   width + height+(element)

margin +border +padding+ ( conte =width +height)

padding/margin: 100px  100px  100px ;   三个数值的情况

          上     左右    下

         100px  100px;   两个数值的情况

          上下    左右
         100px     一个数值的情况
        上下左右

两个情况: 垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值 
         水平方向,两个标签都设这外边距,取两者的边距之和

层模型 position

1.absolute  绝对定位

   1)脱离原来位置进行定位

   2)相对于最近的有定位的父级进行定位，如果没有，那么相对于文档进行定位

2. relative  相对定位

   1)保留原来位置进行定位

   2)相对于原有位置进行定位

   用relative 作为参照物

   用absolute进行定位

3. fixed  固定定位

居中定位(广告)

 div  {

   position: absolute;

   left: 50%;

   right: 50%;

   width: 100px;

   height: 100px;

   background-color: red;

   margin-left:-50px;

   margin-top: -50px;

 }

浮动模型float

float:left/right;


单行排：父级边界大小排列

1.  浮动元素产生了浮动流

  所有产生了浮动流的元素，块级元素看不到

  产生了bfc的元素和文本类属性（inline）的元素以及文本都能看到浮动元素
     BFC 

     Block format context 块级格式化上下文 （让盒子所附的语法规则发生改变）  
     bfc区域不会与float box重叠，是页面上的一个独立容器，子元素不会影响到外面

     触发盒子的BFC 5种方式

     1)position：absolute;

     2)display:inline-block;

     3)float:left/right;

     4)overflow:hidden; 溢出盒子部分隐藏   
     5）根元素
2.  清除浮动流（必须是块级元素） clear:both;

3.  content:  只在伪元素中起作用

4.  伪元素是行级元素::before\::after   inline属性

5.  position:absolute; float:left/right;  这两个从内部把元素转换为inline-block;

包裹浮动元素

行级元素只能嵌套行级元素

块级元素可以嵌套任何元素

除<p> </p>

a标签不能套用a标签

文字溢出处理overflow

单行文本处理

    white-space:nowrap;/*文字溢出处理*/

    overflow:hidden;

    text-overflow:ellipsis;/*点点点显示*/

多行文本处理

       手动，后端

       多数使用截断，溢出部分隐藏

        width:200px;

        height:40px;   /*文本高度2倍*/

        line-height:20px;

        border:1px solid #000;

        overflow:hidden;

visible:默认值。内容不会被修剪，会呈现在元素框之外。
hidden:内容会被修剪，并且其余内容是不可见的。
scroll:内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto:如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit:规定应该从父元素继承 overflow 属性的值。

overflow原理：
    bfc是css可视化渲染的一部分，是一块区域，规定了内部块盒的渲染方式，以及浮动相互之间的影响关系。
    当元素设置了overflow样式且值部位visible时，该元素就构建了一个bfc，bfc在计算高度时，内部浮动元素的高度也要计算在内，
    也就是说这个时候bfc区域内只有一个浮动元素，bfc的高度也不会发生坍塌，所以达到了清除浮动的效果。

前端开发-css基础入门的更多相关文章

  1. WEB前端开发CSS基础样式全面总结

    Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...

  2. Web前端开发css基础样式总结

    颜色和单位的使用    颜色        用颜色的名字表示颜色,比如:red        用16进制表示演示 比如:#FF0000        用rgb数值表示颜色,rgb(红,绿,蓝),每个值 ...

  3. Web前端开发CSS基础

    CSS 层叠样式表(英文全称:Cascading Style Sheets),是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不 ...

  4. 第十一章 前端开发-css

    第十一章 前端开发-css 1.1.0 css介绍 css是指层叠样式表(Cascading Style Sheets),样式定义如何显示html元素,样式通常又会存在于样式表中. css优势: 内容 ...

  5. 要web开发精品教程吗？免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放

    要web开发精品教程吗?免费无广告一百期连讲的那种-逐浪CMS前端开发100期入门教程全面开放 大师主讲 经验难得 由逐浪CMS首席架构师发哥老师,亲自主理讲解. 历时一年精心打造, 汇聚了互联网诞生 ...

  6. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  7. 前端开发css禁止选中文本

    在我们日常的Java web前端开发的过程中呢,程序员们会遇到各种各样的要求,所以不每天学的东西感觉自己都退步了,都更不上时代的发展了. 每天应对各种需求,每天活在疑问中就是我们程序员的真是写照.但我 ...

  8. 1+x 证书 Web 前端开发 css 专项练习

    官方QQ群 1+x 证书 Web 前端开发 css 专项练习 http://blog.zh66.club/index.php/archives/192/

  9. 云小课｜DGC数据开发之基础入门篇

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:欢迎来到DGC数据 ...

随机推荐

  1. JMS学习六（ActiveMQ消息传送模型）

    ActiveMQ 支持两种截然不同的消息传送模型:PTP(即点对点模型)和Pub/Sub(即发布 /订阅模型),分别称作:PTP Domain 和Pub/Sub Domain. 一.PTP消息传送模型 ...

  2. java开发需掌握技能1

    1.熟练掌握Java基础.语法规范.集合框架等,基础语法.Java关键字.内部类.泛型.集合类使用场景2.Java io/nio框架体系.文本文件.二进制文件读写.nio.buffer机制3.Jsp. ...

  3. Module not found: Error: Can't resolve ' vue-resource'

    问题: 在学习vue的过程中出现了这个问题,说明VueResource模块没有安装. 解决方法: 打开终端,进入当前项目所在目录,输入指令 npm install vue-resource --sav ...

  4. I/O 多路复用的特点：

    I/O 多路复用是通过一种机制使一个进程能同时等待多个文件描述符(fd),而这些文件描述符(套接字描述符)其中的任意一个进入读就绪状态,epoll()函数就可以返回. 所以, IO多路复用,本质上不会 ...

  5. git回滚操作

    一,找到之前的版本历史纪录,确定要回滚到那个版本号:git log 二,回滚到这个版本:git reset --hard 72229f823c8b21cbe52142a944d74f1883fa41a ...

  6. JSON.stringify方法报错：Converting circular structure to JSON

    别以为JSON.parse(JSON.stringify(data))做深拷贝无敌,对于以下这种情况,当你需要保留父级对象,即 对象存在循环引用,就会报错. var a = [ { "id& ...

  7. __file__, sys._getframe().f_lineno 当前文件的行号

    当前文件的行号 try: f = open(sys.argv[1], "rb") address_book.ParseFromString(f.read()) f.close()e ...

  8. Spring+hibernate 配置实例

    转自:http://www.cnblogs.com/hongten/archive/2012/03/10/java_spring_hibernate.html 项目结构: http://www.cnb ...

  9. 测开之路一百四十六：WTForms之表单应用

    WTForms主要是两个功能:1.生成HTML标签  2.对数据格式进行验证 官网:https://wtforms.readthedocs.io/en/stable/ 这篇介绍用wtform生成htm ...

  10. mysql --> select * from Employee group by name这样的语法有什么意义？

    神奇的mysql才会支持select * from Employee group by name 这种反逻辑的SQL(假定该表非仅name一个列) mysql 的逻辑是:select 的返回字段,如果 ...