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. 箭头函数详解()=>{}

    摘要:箭头函数有几个使用注意点. (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象,箭头函数继承而来的this指向永远不变. (2)不可以当作构造函数,也就是说,不可以使用n ...

  2. C#实现读取指定盘符硬盘序列号的方法

      文章主要介绍了C#实现读取指定盘符硬盘序列号的方法,涉及C#针对硬件属性的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了C#实现读取指定盘符硬盘序列号的方法.分享给大家供 ...

  3. nodejs 简单的搭建一个服务器

    前言: nodejs 主要是后台语言  node 是在终端运行的,所以他可以进行 dos 命令 模块 自定义 JavaScript 是前台语言 nodejs 是 也是使用我们的 JavaScript ...

  4. 在docker容器中调用docker命令

    宿主容器均为CentOS7.6.1810 docker run -it --rm \ -v /usr/bin/docker:/usr/bin/docker \ -v /var/run/docker.s ...

  5. maven之阿里云Maven镜像的使用

    Maven中央仓库在国外,速度比较慢,所以我们采用国内的镜像,速度回有质的提升. 配置下setting.xml <mirrors> <mirror> <id>ali ...

  6. 1、Electron入门HelloWorld案例

    一.Electron是什么? 官网:https://electronjs.org/ Electron是由Github开发,用HTML,CSS和JavaScript来构建跨平台桌面应用程序的一个开源库. ...

  7. Visual Studio Code - 同步代码时使用 rebase

    打开设置 设置"git.rebaseWhenSync": true

  8. JS单引号嵌套的问题，怎么改才能对呢！

    JS单引号嵌套的问题,怎么改才能对呢! https://zhidao.baidu.com/question/416584343.html document.getElementById(celbid) ...

  9. mysql数据库delete数据时不支持表别名！！！

    mysql数据库delete数据时不支持表别名!!! mysql delete时候 提示语法错误!如下sql: 去掉 表别名的时候: 正确的写法例如: DELETE FROM COMMENTS_REP ...

  10. Django-DRF组件学习-路由学习

    1.路由router 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework提 ...