1.css样式表分别有：

　　内联样式表

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

<style>

    //这个是内联样式表<style></style>这里面可以书写css样式

</style>

</head>

<body>

   <div style="这个也是内联样式表"></div>

</body>

</html>

　　外部样式表

<link rel=“stylesheet” type=“text/css” href=“路径” />
外部样式表是从新创建一个专门的css文件在通过路径去链接

　　2.css选择符

　　选择符{属性:属性值;属性:属性值;}

　　例：

　　div{width:200px;height:100px;background:red; }

　　每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值

　　属性必须放在花括号中，属性与属性值用冒号连接。

　　每条声明用分号结束。

　　当一个属性有多个属性值的时候，属性值与属性值用空格分隔。

　　在书写样式过程中，空格、换行等操作不影响属性显示。

　　3.css选择符

　元素选择符也可以叫类型选择符：
　　例: 
　　　　　<div> <header> <nav> <footer> <figure> ...
　　通配符
　　　例：
　　　　　　*（号选择所有）
　　id选择符：
　　　例：
　　　　　　<div id="这个就是id选择符是写在标签里面的"></div>（id=“里面的可以随便写比如a/b/s/xdv/sv/等但必须要写在双引号里面才可以”）
　　class选择符：
　　　例：
　　　　　　<div class="这个就是class选择符跟id选择符是一样都必须要写在双引号里面"></div>
　　群组选择符：
　　　例：　　　　

　　　　div , .hehe , p , #top {background:red;}  同时对多个选择符设置同一个样式 选择符与选择符之间用逗号分隔

　　后代选择符：
　　　　例：
　　　　　　#nav   ul   li {background:red;}
　　　　　　缩小范围去选择元素 选择符与选择符之间用空格分隔
　　伪类选择符：
　　　　例：
　　　　　　　　a:link {属性:属性值;} 初始化状态
　　　　　　　　a:visited {属性:属性值;} 被点击后的状态
　　　　　　　　a:hover {属性:属性值;} 当鼠标滑过时候的状态
　　　　　　　　a:active {属性:属性值;} 当鼠标按下时候的状态

　　　　　　　　伪类选择器只能给特殊的带有href属性的a标签使用 并且只有在特殊的条件下才会有效果
 

　　4.选择符的优先级

选择符的优先级即选择符的权重 针对同一个元素或同一群元素 进行选择时起的冲突进行的优先选择的处理。

    内联样式的权重为

    id选择符的权重为

    class选择符的权重为     　

    伪类选择符的权重为     　　

    元素选择符的权重为     　　

    继承样式的权重为

    后代选择符的权重：为后代选择符的权中之和

　　5.文本的属性

　　文本大小及单位

　　文本大小 (设置字体的大小 通常网页字体为12px或14px)

　　font-size:12px;

　　单位 (通常单位为像素)

　　px像素 pt点 em倍距

　　3pt=4px

　　em是根据自身的字体大小来决定多少像素

　　元素的默认大小是16px

　　1em=16px

　　文本的属性

    font-style:normal/ italic [设置文本为斜体]

    font-weight:normal(-)/ bold(-)    [设置文本为粗体]

    font-family: “文本字体1”,”文本字体2”; [文本类型]

    text-align:left/center/right/justify [文本水平对齐方式]

    vertical-align:top/middle/bottom[垂直对齐方式]

    line-height:数字px;[设置文本在一行内的高度]

    设置文本简写方式

    font:加粗 倾斜 文本大小/行高  “字体”;

　　文本的颜色

　颜色属性

十六进制值

#f00     #fa0000   red

颜色模式：光色模式

  R      G      B

FF           00
当然除了这个还可以用一些对应的单词

　　文本修饰

text-decoration 文本修饰

none:没有修饰

underline:添加下划线

overline:添加上划线

line-through:添加删除线

text-indent 首行缩进

　　6.背景的设置

背景颜色

background-color:#f00;

背景图片

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

背景图片平铺属性

background-repeat:

repeat         默认平铺

repeat-x     横向平铺

repeat-y    纵向平铺

no-repeat     不平铺

背景图位置

background-position:值1(水平)   值2(垂直)

left/center/right/数值     top/center/bottom/数值

数值可以设置负值

背景简写：

background:颜色   图片路径    是否平铺     位置;

小扩展常用图片格式

jpg    (图片有损质量 但肉眼难分辨 来减小图片大小  图片非搂空使用);

png    (图片有损质量 但肉眼分辨不出 来减小图片大小  搂空图片使用的格式)

gif    (图片有损严重 肉眼容易分别 常用与做动图)

　　7.浮动属性

float:

none     默认不浮动

left       左浮动

right     右浮动

　　8.列表li相关独有属相

list-style-type[设置列表符号]

 disc(实心圆)/circle(空心圆)/square(实心方块)/none(去掉列表符号)；

list-style-image:url(路径); [自定义图片列表符号]

list-style-position:outside(默认外边)/inside(里边)；[定义符号所在位置]

list-style:none;去掉列表符号

　　

css的一些基础方法的更多相关文章

  1. css+js+html基础知识总结

    css+js+html基础知识总结 一.CSS相关 1.css的盒子模型:IE盒子模型.标准W3C盒子模型: 2.CSS优先级机制: 选择器的优先权:!important>style(内联样式) ...

  2. （1） css的核心基础

     css的核心基础 1.css的基本语法在具体使用css之前,请各位兄弟姐妹先思考一个生活中的问题,一般情况下我们是如何描述一个人的呢? 小明{ 民族:汉族: 性格:温柔: 性别:男: 体重:68kg ...

  3. (五)CSS和JavaScript基础

    DHTML :制作动态HTML页面的技术 DHTML=HTML+层叠样式表CSS+脚本语言javascript 一.CSS 1.1 CSS样式的分类: 行内样式:只影响一行,其他相同标签也不影响.如下 ...

  4. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  5. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  6. 为IE单独写CSS的三种方法

    本文由 Kayo Lee 发表,本文链接:http://kayosite.com/the-methods-make-css-only-for-ie.html 因为万恶的 IE 存在各种的不标准,因此, ...

  7. 三种纯CSS实现三角形的方法

    看到像上图这样的 tip 的小三角,你会怎么办? 切个图上去?恩,不错,简单,兼容性也一级棒,不但好控制,那点小东西也增加不了多少图片的大小.但有没有更好更讲究技巧的办法呢?哈哈,那必须有啊,而且还不 ...

  8. CSS清除浮动的方法

    CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...

  9. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

随机推荐

  1. pre-fork 分叉 软分叉 硬分叉 前叉实现 pre-fork implementation

    https://mp.weixin.qq.com/s/wIDTs2J1ZkLkAEHqQnkYnw 什么是分叉?为何对区块链发展至关重要? Uselink公有链 Uselink公有链 2018-12- ...

  2. Kotlin中反射

    枚举类成员 import kotlin.reflect.full.memberFunctions import kotlin.reflect.full.memberProperties fun mai ...

  3. kotlin之map委托

    fun main(arg: Array<String>) { val map = mapOf("name" to "tom", ) val user ...

  4. 013-java中的IO操作-InputStream/Reader、OutputStream/Writer

    一.概述 IO流用来处理设备之间的数据传输,上传文件和下载文件,Java对数据的操作是通过流的方式,Java用于操作流的对象都在IO包中. 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称 ...

  5. Qt编写数据可视化大屏界面电子看板9-曲线效果

    一.前言 为了编写数据可视化大屏界面电子看板系统,为了能够兼容Qt4和嵌入式linux系统,尤其是那种主频很低的,但是老板又需要在这种硬件上(比如树莓派.香橙派.全志H3.imx6)展示这么华丽的界面 ...

  6. scikit-learn机器学习(四)使用决策树做分类,并画出决策树,随机森林对比

    数据来自 UCI 数据集 匹马印第安人糖尿病数据集 载入数据 # -*- coding: utf-8 -*- import pandas as pd import matplotlib matplot ...

  7. python进阶-mock接口

    setting.py MYSQL_HOST='192.168.127.139' PASSWORD=' PORT=3306 USER='root' DB='stu' tools.py import py ...

  8. Nginx sticky模块实现session粘滞

    一:下载,解压nginx sticky模块. 1 2 3 # cd /usr/local/src # wget http://nginx-sticky-module.googlecode.com/fi ...

  9. Lua中用table统一管理需要获取的unity物体

    unity上的组件,可以用table统一管理 然后在初始化时候统一给table赋值,这样需要用到时候直接调用table中对应的key便可拿到对应的物体,省下了在脚本开头一堆声明的脚本,这样就不用声明这 ...

  10. Unity-3D-H2

    1.简答题[建议做解释 游戏对象(GameObjects) 和 资源(Assets)的区别与联系. 游戏对象:直接出现在游戏的场景中,是资源整合的具体表现,对象通过层次结构来组织,通过整体-部分的关系 ...