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. [BZOJ4237]稻草人：CDQ分治+单调栈

    分析 按\(y\)排序后CDQ分治,可以发现每个点可以影响的是\(x\)坐标的一段区间,可以使用扫描线+单调栈,在单调栈上二分即可解决,时间复杂度\(O(n \log^2 n)\). 通过归并排序可以 ...

  2. 原型模式故事链(4)--JS执行上下文、变量提升、函数声明

    上一章:JS的数据类型 传送门:https://segmentfault.com/a/11... 好!话不多少,我们就开始吧.对变量提升和函数声明的理解,能让你更清楚容易的理解,为什么你的程序报错了~ ...

  3. python基础之 数据格式化

    %还是format 皇城PK Python中格式化字符串目前有两种阵营:%和format,我们应该选择哪种呢? 自从Python2.6引入了format这个格式化字符串的方法之后,我认为%还是form ...

  4. Java 简单工厂

    在面向对象编程中, 最通常的方法是一个new操作符产生一个对象实例,new操作符就是用来构造对象实例的.但是在一些情况下, new操作符直接生成对象会带来一些问题.举例来说, 许多类型对象的创造需要一 ...

  5. iOS证书发布推送相关知识科普

    账号种类 1.企业账号 299美刀 -- 可以自己发布App,不能发布到App Store 2.个人/公司账号 99美刀 -- 可以发布到App Store, 不可以自己发布不限安装数量的App 个人 ...

  6. Python实现人脸识别

    识别图片 #coding=utf-8 import requests,cv2 import re import os import bs4 #2.读取图片 filename = 'E:/Python/ ...

  7. 前端需要注意哪些SEO

    1.合理的title.description.keywords:搜索对这三项的权重逐个减小,title值强调重点即可,重要关键词不要超过2次,而且要靠前,不同页面title要有所不同:descript ...

  8. Collector的使用

    一.Collector的引入 1)Collector的聚合作用前面已经使用过,将list.stream后的一系列操作之后再返回list. 2)Collector的引入,通过需求:将绿色的Apple放在 ...

  9. 阶段3 1.Mybatis_07.Mybatis的连接池及事务_6 mybatis中的事务原理和自动提交设置

    在实际的开发中,建议使用连接池的形式. JNDI的资料 H:\BaiDu\黑马传智JavaEE57期 2019最新基础+就业+在职加薪\讲义+笔记+资料\主流框架\31.会员版(2.0)-就业课(2. ...

  10. C# 打印倒三角

    void test6(int num) { try { #region 方法1 int maxstar = (num - 1) * 2 + 1; string line = ""; ...