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. OverFeat：基于卷积网络的集成识别、定位与检测

    摘要:我们提出了一个使用卷积网络进行分类.定位和检测的集成框架.我们展示了如何在ConvNet中有效地实现多尺度和滑动窗口方法.我们还介绍了一种新的深度学习方法,通过学习预测对象边界来定位.然后通过边 ...

  2. Selenium 详解xpath定位

    xpath定位在业界被戏称为元素定位的"屠龙宝刀",宝刀在手,武林我有.现在我们就来详解xpath定位方法. 一.xpath通过元素属性定位 xpath可以通过元素的属性来定位,如 ...

  3. sqli-labs(30)

    0X01 观摩源码 和29关没区别 只是这里闭合变成了“ 0X02构造语句 爆库名 ?id=&id=-"union select 1,database(),3%23 0X03组合拳打 ...

  4. android和网络连接相关的类URL，URLConnection，HttpURLConnection，HttpClient

    这几个类都是用于和服务器端的连接,有些功能都能够实现,关系是: 一.URL URL标识着网络上的一个资源:该类包含一些URL自身的方法,如获取URL对应的主机名称,端口号,协议,查询字符串外,还有些方 ...

  5. springMVC的常用注解有哪些？

    1.@Controller @Controller 用于标记在一个类上,使用它标记的类就是一个SpringMVC Controller 对象.分发处理器将会扫描使用了该注解的类的方法,并检测该方法是否 ...

  6. 利用Git版本控制管理你的项目

    准备工作 项目创建完成后,将项目版本控制起来,今后每个版本的迭代会非常清楚,同时也有助于项目进行协同开发. 还有一个十分重要的问题是:项目上线后,线上的运行的程序的配置与线下进行测试的配置文件是不一样 ...

  7. 基于DRF的图书增删改查

    功能演示 信息展示 添加功能 编辑功能 删除功能 DRF构建后台数据 本例的Model如下 from django.db import models class Publish(models.Mode ...

  8. windows下 文件资源管理器 的操作

    alt + d 可以直接把光标移动到地址栏 shift + f10 可以触发右键, 后面就可以用键盘操作右键中的内容了 ( 如打开vscode alt + 空格 可以弹出窗口的菜单栏 ( 控制最大化 ...

  9. 学习 Node.js 的 6 个步骤

    第一步 对于刚接触Node.js的新手来说,第一步无非是打好基础,你需要弄明白以下事情: JavaScript 的特性和语法.假如你对 JavaScript 还不熟悉的话,推荐书籍及链接: JavaS ...

  10. html5获取位置信息,h5获取位置信息

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...