02-CSS简介和基本选择器
# CSS
为了让网页元素的样式更加丰富,
也为了让网页的内容和样式能拆分开,
CSS由此思想而诞生,
CSS是 Cascading Style Sheets 的首字母缩写,
意思是层叠样式表。
有了CSS,html中大部分表现样式的标签就废弃不用了,
html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。 ## Css基本语法及页面引用 ### css基本语法
> css的定义方法是:
> 选择器 { 属性:值; 属性:值; 属性:值;}
>选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性每个属性有一个或多个值。 示例:
```angular2html
div{ width:100px; height:100px; color:red }
``` ### css页面引入方法
1、外联式:通过link标签,链接到外部样式表到页面中。
```angular2html
<link rel="stylesheet" type="text/css" href="css/main.css">
```
2、嵌入式:通过style标签,在网页上创建嵌入的样式表。
```angular2html
<style type="text/css"> div{ width:100px; height:100px; color:red }
...... </style>
```
3、内联式:通过标签的style属性,在标签上直接写样式。 ```angular2html
<div style="width:100px; height:100px; color:red ">
......
</div>
``` ## CSS选择器
常用的选择器有如下几种: **1、标签选择器** > 标签选择器,此种选择器影响范围大,建议尽量应用在层级选择器中。 举例:
```angular2html
*{margin:0;padding:0}
div{color:red} <div>....</div> <!-- 对应以上两条样式 -->
<div class="box">....</div> <!-- 对应以上两条样式 -->
``` **2、id选择器**
>通过id名来选择元素,元素的id名称不能重复,所以一个样式设置项只能对应于页面上一个元素,不能复用,
> id名一般给程序使用,所以不推荐使用id作为选择器。 举例:
```angular2html
#box{color:red} <div id="box">....</div> <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
```
**3、类选择器** > 通过类名来选择元素,一个类可应用于多个元素,
> 一个元素上也可以使用多个类,应用灵活,可复用,是css中应用最多的一种选择器。 举例:
```angular2html
.red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} <div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
``` **4、层级选择器** > 主要应用在选择父元素下的子元素,或者子元素下面的子元素,可与标签元素结合使用,减少命名,
> 同时也可以通过层级,防止命名冲突。 举例:
```angular2html
.box span{color:red}
.box .red{color:pink}
.red{color:red} <div class="box">
<span>....</span>
<a href="#" class="red">....</a>
</div> <h3 class="red">....</h3>
``` **5、组选择器** > 多个选择器,如果有同样的样式设置,可以使用组选择器。也成为 并列选择 举例:
```angular2html
.box1,.box2,.box3{width:100px;height:100px}
.box1{background:red}
.box2{background:pink}
.box2{background:gold} <div class="box1">....</div>
<div class="box2">....</div>
<div class="box3">....</div>
``` **6、伪类及伪元素选择器** > 常用的伪类选择器有hover,表示鼠标悬浮在元素上时的状态,
> 伪元素选择器有before和after,它们可以通过样式在元素中插入内容。 ```angular2html
.box1:hover{color:red} <div class="box1">....</div> a:hover {color: #FF00FF; text-decoration: underline} /* 鼠标在该元素上时 */ a:before{content:"Hello";} /*在每个<a>元素之前插入内容*/
a:after{content:"world";} /*在每个<a>元素之后插入内容*/
```
02-CSS简介和基本选择器的更多相关文章
- 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记
[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...
- 2、前端--初见前后端交互、CSS简介、基本选择器、组合选择器、属性选择器、分组与嵌套、伪类选择器
今日内容概要 初窥后端框架 css简介 css选择器 今日内容详细 初次体验前后端交互 # 代码无需掌握 只看效果即可 """后端框架:可以简单的理解为别人写好的一个非常 ...
- CSS简介,基础选择器,字体属性,文本属性
欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序 ...
- CSS 简介、 选择器、组合选择器
#CSS 装饰器引入<!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...
- form表单,css简介,css选择器,css样式操作
form表单 简介 表单在Web网页中用以让访问者输入数据,当提交表单时,表单中输入的数据被打包传递给Web服务器端的程序 以处理,从而使得Web服务器与用户之间具有交互功能. 表单实现前后台交互:用 ...
- CSS 简介、语法、派生选择器、id 选择器、类选择器、属性选择器
CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现 ...
- 1 CSS简介&语法&选择器及优先级&背景&文本&字体&链接&列表&表格
什么是CSS? Cascading Style Sheets层叠样式表,样式定义如何显示HTML元素 样式通常存储于样式表中,外部样式表通常存储在CSS文件中 多个样式定义可层叠为1,样式对网页中元素 ...
- CSS 基础知识点 样式 选择器 伪类
CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 ...
- html5快速入门(二)—— CSS简介
前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的文章是本人自己整理,尽量将开发中不常用到的剔除,将经常使用的拿出来,使需要的朋友能够真 ...
- CSS 简介
CSS 简介 需要具备的基础知识 在继续学习之前,你需要对下面的知识有基本的了解: HTML XHTML CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义 ...
随机推荐
- Hybris commerce产品主数据的搜索API,批量返回若干主数据的值
新建一个产品,identifier设置为i042416-1,创建之后立即能够在Backoffice里搜索出来: 等到Storefront的indexing做完之后,前台通过关键字i042416也能将这 ...
- 面试题常考&必考之--http访问一个页面的全流程(Tcp/IP协议)
分析:-http访问一个页面的全流程,也就好比我们在地址栏输入地址,然后点击回车进行访问 该面试题的主要考点是:计算机网络的TCP/IP协议栈 描述图片:首先应用层提交http请求,传到传输层后由,T ...
- ng-template、ng-content、ng-container
https://www.jianshu.com/p/0f5332f2bbf8 ng-template.ng-content.ng-container三者应该是自定义组件需要经常用到的指令.今天咱们就来 ...
- CentOS7下修改默认网卡名为eth0的两种方法
前言 大家都知道CentOS7默认的网卡名称是和设备名称是随机的,如果要修改网卡名称以 eth 开头,有两种方式,如下: 第一种方式 这种方式适合在安装操作系统的时候进行设置, 点击 Tab,打开ke ...
- 2017南宁网络赛 Problem J Minimum Distance in a Star Graph ( 模拟 )
题意 : 乱七八糟说了一大堆,实际上就是问你从一个序列到另个序列最少经过多少步的变化,每一次变化只能取序列的任意一个元素去和首元素互换 分析 : 由于只能和第一个元素去互换这种操作,所以没啥最优的特别 ...
- CodeForces 1197D Yet Another Subarray Problem
Time limit 2000 ms Memory limit 262144 kB Source Educational Codeforces Round 69 (Rated for Div. 2) ...
- php开发常用技巧总结
1.[本地开启xdebug导致执行时间超max_execution_time产生的问题处理方法]xdebug开启,会导php执行速度慢,超max_execution_time,这种情况下有必要合理设置 ...
- windows 删除文件或文件夹
删除文件夹 rd 文件夹名 (只能删除空文件夹) 删除整个文件夹及子文件所有 rd /s 文件夹名(删除该文件及子文件) 删除文件 del 文件名(删除该文件)
- D1. Kirk and a Binary String (easy version)
D1. Kirk and a Binary String (easy version) 01串找最长不降子序列 给定字符串s,要求生成一个等长字符串t,使得任意l到r位置的最长不降子序列长度一致 从后 ...
- rman备份/恢复
全备脚本 cat rman_full.sh #!/bin/bash export ORACLE_BASE=/opt/oracle export ORACLE_HOME=$ORACLE_BASE/pro ...