前端CSS基础7.8

1、css选择器:相当于一个标识,有3种选择器

  第一种选择器:标签选择器 p{ color:red;}
  第二种选择器:class选择器 .c1{ color:green;} 可被多次调用
  第三种选择器:id选择器 #d1{ color:blue;} 独有

  优先级:标签<class<id

  注意:一个标签可以有多个class,但是只能有一个id

2、css文字效果:

  字体:font-family
  字号:font-size
  颜色:color
  粗体:font-weight
  下划线:text-decoration:underline(删除线:line-through;顶划线:overline
  英文首字母大写:text-transform:capitalize(全部大写:uppercase;全部小写:lowercase)
  字母间距:letter-spacing
  水平位置:text-align

  居中:

    水平居中:text-align:center
    垂直居中:line-height:300px;(和文字所在的div的高度一样)

3、css继承性:

  #d1 p 表示id为d1的标签下面的p标签
  #d1,p 表示id等于d1的标签和p标签

  注意:css具有继承性,只有字体相关的css属才能够被继承 (面试常问)

4、边框:
              样式 粗细 颜色
  border: solid 1px red;

  等同于下面3句话:

  边框样式:border-style:solid;(实线:solid;虚线:dashed;点划线:dotted)
  边框粗细:border-width:1px;
  边框颜色:border-color:red;

5、背景:

  背景颜色:background-color:#00FF00;

  背景图片:background-image:url(路径);

  (注意:当图片的的大小,小于它所在的div时,图片会横向、纵向填满div)

  背景重复:background-repeat:no-repeat;(不重复:no-repeat;横向重复:repeat-x;纵向重复:repeat-y)

  背景方位:background-position:5px 10px;(左边、上边)

  背景固定:Background-attachment:fixed;

  综合:

    background:blue url(xx.jpg) no-repeat fixed 5px 10px;

6、补充内容:

  ·table表格的css属性:border-collapse:collapse;(表格间隙合并)

    常用属性:width、height、border、cellspacing、cellpadding、bordercolor、bgcolor、align
          宽    高    边框    内框宽   文字到边框距  边框颜色      背景色    水平位置

  ·链接时是手的形状:cursor:pointer;

时间: 2024-08-26 18:11:57

前端CSS基础7.8的相关文章

前端--css基础

1.css引用 三种方法 1)<p style="..."> Jason </p>                                            #body标签内直接使用 2) <head><style>  .....        </style></head>               #head头添加   style 标签 3)<link rel="styleshee

前端开发:css基础知识之盒模型以及浮动布局。

前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把它写到我的博客中,想知道自己过来翻就好啦 ^_^  下面楼主把当前的自己对css的基础认知一一给大家道来...... 盒模型 谈到盒模型,有经验的小伙伴一定滚瓜烂熟,无非就是 内容(content).填充(padding).边框(border).边界(margin): 这些属性我们可以把它转移到我们

零基础学WEB前端-CSS

CSS指层叠样式表(Cascading Style Sheets),CSS 是标准的布局语言,用来控制元素的尺寸.颜色.排版.CSS 由 W3C 发明,用来取代基于表格的布局.框架以及其他非标准的表现方法.样式 (style) 定义如何显示 HTML 元素:样式通常存储于样式表中:外部样式表存储于 CSS 文件中. CSS可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 1.CSS基础

Web前端开发基础 第一天(Html和CSS)

学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript语言.下面我们就来了解下这三门技术都是用来实现什么的: 1. HTML是网页内容的载体.内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2. CSS样式是表现.就像网页的外衣.比如,标题字体.颜色变化,或为标题加入背景图片.边框等.所有这些用来改变内容外观的东西称之为表现. 3. JavaScript是用来实现网页上的特效效果.如:鼠标滑过弹出下拉菜单.或鼠标滑过表格的背景颜色改变.还有焦点

做好前端的话html和css基础必须夯实

很多前端大佬说,要做好前端的话html和css基础必须夯实.那么,达到什么水平才能叫基础夯实呢? 1.拿到设计人员给的图,不管是pc或者是移动端的图,看一遍之后脑海中已经有了很明确的结构和页面书写过程中可能出现的兼容问题. 2.页面在书写的时候可以快速的写出来适合该项目相关的reset.css.并且在书写布局的适合可以借助编辑器的相关快捷键和相应的标记符,迅速把某一大模块的结构书写出来,比如利用hbulider的table快捷键书写快捷结构,div>p.box$*4+p.text,并且做到一步到

前端开发之CSS基础知识02

重要: 行内元素中只能容纳文本或其他的行内元素 a标签例外 文字类型的块标签,不要放其他块元素 如 P H1 CSS规范: .demo {} 空格 font-size: 12px; 空格 .a1, .a2, .a3 {} 空格 后代选择器或子代选择器最好不要超过三层 文字分为 顶线 中线 基线 底线 CSS特性: 层叠行:若冲突,按照最后的为准 CSS权重(重要): 标签 0.0.0.1 类选择器 0.0.1.0 id选择器 0.1.0.0 内联样式 1.0.0.0 !important 无穷大

前端总结&#183;基础篇&#183;CSS

前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  /* 去除边距 */ul {margin:0;padding-left:0;}  /* 去除边距和左填充 */li {list-style-type:none;}  /* 去除列表的圆点 */a {text-decoration:none;}  /* 去除下划线 */ 2 浏览器前缀 { tran

Web前端开发基础:HTML、CSS、JavaScript分别实现什么功能?

相信正在学习Web前端知识的小伙伴们都知道,学习Web前端开发基础技术需要掌握:HTML.CSS.JavaScript,那么这三个都是分别实现什么功能的呢?下面和小编一起来看看吧! 一.HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 在这里小编建了一个前端学习交流扣扣群:132667127,我自己整理的最新的前端资料和高级开发教程,如果有想需要的,可以加群一起学习交流 二.CSS样式是表现 就像网页的外衣,比如:标题字体.颜色变化.为标题

前端学习(九):CSS基础

进击のpython 前端学习--CSS基础 CSS的样式可以写在哪呢?其实CSS的样式插入式十分灵活的 按照插入的形势来看,可以分为三种情况 而接下来就对这三种情况进行简单的讨论 内嵌式 CSS样式表是可以直接把代码放在现有的标签里面去的 这种方法就称为内嵌式: <p style='color:red;'>文字颜色为红色</p> 把对应的style属性,写在p标签的开始标签中 CSS样式代码要写在style=""双引号中,如果有多条CSS样式代码设置可以写在一起