初识CSS(1)
1.css的语法
a.位置
<head>
<style type="text/css"> //css代码
</style>
</head>
b.语法
选择器{
属性名1:属性值1;
属性名2:属性值2;
}
例:h1{
font-size:12px; //字体大小
color:red; //字体颜色
}
注意:多个用属性用分号分隔
2.选择器
a.标签选择器
语法:
标签名{
------
}
b.类选择器
语法:
.class属性值{
-------
}
步骤:
第一步:给指定的html标签加上class属性
第二步:在style中写
.class属性值{
-------
}
.green{ |
c.id选择器
语法:
#id属性值{
......
}
步骤:
第一步:给指定的html标签加上id属性
第二步:在style中写
#id属性值{
-------
}
<html> |
3.引用样式的方式
a.行内样式
使用style属性引入样式
列:<h1 style="font-sze:16px;color:red;">xxx</h1>
b.内部样式
在head中写style
列:h1{xxxx}
c.外部样式
把CSS代码保存在以CSS结尾的文件(层叠样式文件)
把CSS文件引入html中
引入方式两种:
第一种:链接方式
<link rel="stylesheet" href="文件路径" type="text/css"/>
第二种:导入方式
<style>
@import url("文件路径")
</style>
4.优先级
行内样式>内部样式>外部样式(就近原则)
id选择器>class选择器>标签选择器
5.高级选择器
a.后代选择器
父标签 子标签{
......
}
<html> |
b.交集选择器
选择器(class选择器或者id选择器){
......
}
<html> |
c.并集选择器
选择器1,选择器2,选择器3,......选择器n{
......
}
<html> |
初识CSS(1)的更多相关文章
- 初识CSS
css解释 css样式: css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化,CSS的可以使页面更加的美观.基本上所有的html页面都或多或少的使用cs ...
- #WEB安全基础 : HTML/CSS | 0x1初识CSS
"我受够这些难看的网页了,我怎么才能让它变得好看点?"你说. 我答道:"看来你得学点CSS了" 学习这些东西只有一个原则,就是用你的脑袋想,用你的眼睛看,用的你 ...
- 初识css预处理器:Sass、LESS
这篇文章是初步介绍css预处理的,详细学习请移步官网~ 什么是css预处理器 CSS 预处理器是一种语言, 通俗易懂的话来说就是“用一种专门的编程语言,进行 Web 页面样式编写,再通过编译器转化为正 ...
- 初识CSS样式表
背景介绍: 接触了新闻公布系统,这也是自己第一个B/S的项目.从之前的拖拽空间.任意布局到现在的HTML总会有非常多的新奇.棘手和挑战.可是不管是何种形式都离不开主要的步骤:做前台.做后端.能够说一个 ...
- web前端基础——初识CSS
1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...
- 前端基础 & 初识CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.l 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 每个CS ...
- 新手前端笔记之--初识css
css样式表是为了容纳与html文档分离出来的样式属性而产生的,所以她理所当然的包含两个部分:1.样式的表示,使用{属性1:属性值:属性2:属性值:...},2.样式与标签的对应(如何找的对应标签), ...
- CSS——NO.1(初识CSS)
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- 0008 CSS初识(行内式、内部样式表、外部样式表)
typora-copy-images-to: media 第01阶段.前端基础.CSS初识 CSS层叠样式表 学习目标 理解 css的目的作用 css的三种引入方式 应用 css三种引用方式的书写 通 ...
随机推荐
- python学习之路-第八天-文件IO、储存器模块
文件IO.储存器模块 文件IO 代码示例: # -*- coding:utf-8 -*- #! /usr/bin/python # filename:using_file.py poem = '''\ ...
- Java io流详解三
public class IOpractise { public void iotest() { int b= 0; FileInputStream fis = null; try { fis = n ...
- appium 自动化测试案例
原文地址http://www.cnblogs.com/tobecrazy/p/4579631.html 原文地址http://www.cnblogs.com/tobecrazy/ 该博主有很多干货,可 ...
- ES6的十个新特性
这里只讲 ES6比较突出的特性,因为只能挑出十个,所以其他特性请参考官方文档: /** * Created by zhangsong on 16/5/20. */// ***********Nu ...
- SqlAlchemy基本
安装SQLAlchemy: $ easy_install sqlalchemy 数据库表是一个二维表,包含多行多列 [ ('1', 'Michael'), ('2', 'Bob'), ('3', 'A ...
- JS之DOM对象二
前面在JS之DOM中我们知道了属性操作,下面我们来了解一下节点操作.很重要!! 一.节点操作 创建节点:var ele_a = document.createElement('a');添加节点:ele ...
- [LeetCode] 139 Word Break(BFS统计层数的方法)
原题地址: https://leetcode.com/problems/word-break/description/ 题目: Given a non-empty string s and a dic ...
- Java结对编程四则运算一周小结
Java结对编程四则运算一周小结 需求分析 对于四则运算来说最主要的就是要计算出产生的式子(字符串的形式). 设计思路 总体可将这个项目分解为几个部分:产生式子,计算式子,判断对错并记录: 具体的思路 ...
- MapReduce:给出children-parents(孩子——父母)表,要求输出grandchild-grandparent(孙子——爷奶)表
hadoop中使用MapReduce单表关联案例: MapReduce:给出children-parents(孩子——父母)表,要求输出grandchild-grandparent(孙子——爷奶)表. ...
- React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...