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. python脚本实现药品名自动翻译2

    python机器学习-乳腺癌细胞挖掘(博主亲自录制视频)https://study.163.com/course/introduction.htm?courseId=1005269003&ut ...

  2. 前端 - 轮询, 长轮训, websocket

    轮询 概念 ajax 轮询的原理很简单,让浏览器间隔几秒就发送一次请求,询问服务器是否有新信息 代码 function showUnreadNews() { $(document).ready(fun ...

  3. ckpt convert to pb

    import tensorflow as tf #from create_tf_record import * from tensorflow.python.framework import grap ...

  4. 通过举例了解java中的流

    Java流结构介绍: Java所有的流类位于java.io包中,都分别继承字以下四种抽象流类型.   字节流 字符流 输入流 InputStream Reader 输出流 OutputStream W ...

  5. CentOS 7下Cloudera Manager及CDH 6.0.1安装过程详解

    目录 一.概念介绍 1.CDH 概览 2.Cloudera Manager 概览 二.环境准备 1.软件版本选择 2.节点准备(四个节点) 3.配置主机名和hosts解析(所有节点) 4.关闭防火墙 ...

  6. systemctl daemon-reload

    systemctl daemon-reload: 重新加载某个服务的配置文件,如果新安装了一个服务,归属于 systemctl 管理,要是新服务的服务程序配置文件生效,需重新加载. init 和 sy ...

  7. tf.contrib.rnn.LSTMCell 里面参数的意义

    num_units:LSTM cell中的单元数量,即隐藏层神经元数量.use_peepholes:布尔类型,设置为True则能够使用peephole连接cell_clip:可选参数,float类型, ...

  8. mysql5.6.36 编译报错make[1]: *** [storage/perfschema/unittest/CMakeFiles/pfs_connect_attr-t.dir/all]..

    cmake -DCMAKE_INSTALL_PREFIX=/usr/local/mysql -DMYSQL_DATADIR=/data/mysqldb -DMYSQL_UNIX_ADDR=/tmp/m ...

  9. c++学习笔记_1

    前言:本笔记所对应的课程为中国大学mooc中北京大学的程序设计与算法(三)C++面向对象程序设计,主要供自己复习使用 第一章 从c到c++ 引用 定义引用时一定要将其初始化成某个变量 引用从一而终,引 ...

  10. opencv实现人脸识别（三） 训练图片模块

    现在我们已经拍好了需要训练的图片,接下来就是进行训练 流程图: 我们在这里用到了numpy库,NumPy是一个功能强大的Python库,主要用于对多维数组执行计算. 使用numpy的目的是减少pyth ...