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. memset设置最大值

    初始化为最大值 memset(mp,0x7f,sizeof(mp));

  2. shell变量与运算

    shell变量与运算 @(0003 shell编程) 变量存在于内存中.假设变量str,设置或修改变量属性时,不带$号,只有引用变量的值时才使用$号.也就是说在内存中,标记变量的变量名称是str,而不 ...

  3. js，正则实现金钱格式化

    https://blog.csdn.net/qq_36279445/article/details/78889305 https://github.com/jawil/blog/issues/30

  4. 关于vue给对象新增属性页面不会动态更新

    不知道大家有没有遇到过这个问题,当我们给data里边声明或者已经赋值过的对象或者数组,添加新的属性时,如果更新此属性的值是不会动态更新视图的. $set 看以下实例: 我们开始给drug_list追加 ...

  5. spring boot: Whitelabel Error Page的解决方案

    http://blog.csdn.net/u014788227/article/details/53670112

  6. 一、基础篇--1.1Java基础-抽象类和接口的区别

    抽象类和接口的区别 抽象类和接口在设计层面的区别主要体现在:接口是对动作的抽象,抽象类是对根源.类的抽象.抽象类表示的是,这个对象是什么,接口表示的是,这个对象可以做什么. 比如,男人.女人是人,人是 ...

  7. 搜索练习题——FBI树

    目录: ·题目描述 ·知识拓展 ·题目分析 ·思路分析 ·代码实现 ·总结 ·题目描述: (洛谷P1087 FBI树) 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称 ...

  8. C/C++中的 void 和 void*

    转自:https://blog.csdn.net/tonglin12138/article/details/86516789 写在前面:开门见山,大家看下面这个例子: unsigned char er ...

  9. EDM邮件营销真的落伍了吗？

    很多朋友都觉得EDM邮件营销已经日暮西山了.难道EDM邮件营销真的落伍过时了吗?小编本文为大家讲解一下. 一.有数据为证:目前电子邮件仍然比较活跃,九成以上的用户每天至少查看一封邮件,并且6成以上的人 ...

  10. JWT原理和使用

    jwt JSON Web Tokens,是一种开发的行业标准RFC 7519,用于安全的表示双方之间的声明.目前,jwt广泛的用在系统的用户认证方面,特别是前后端分离项目. 1.jwt认证流程 在项目 ...