前端基础--css基础
CSS基础
- 一、CSS代码语法
- 组成
- 注释
- 二、CSS样式
- 内嵌式
- 嵌入式
- 外部式
- 三种方式的比较
- 三、选择器
- 标签选择器
- 类选择器
- ID选择器
- 类选择器和ID选择器的区别
- 子选择器
- 包含(后代)选择器
- 通用选择器
- 伪类选择器
- 分组选择符
CSS全称为“层叠样式表 (Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式。
一、CSS代码语法
1. 组成
css 样式由选择符和声明组成，而声明又由属性和值组成。
p{ color:blue;font-size:12px;}
其中：p表示选择符，又称选择器，指明网页中要应用样式规则的元素；color表示属性，：表示声明，在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔，当有多条声明时，中间可以英文分号“;”分隔；blue表示值。
2. 注释
在CSS中也有注释语句：用/*注释语句*/来标明（Html中使用<!--注释语句-->)
二、CSS样式
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。
1. 内嵌式
css样式表就是把css代码直接写在现有的HTML标签中。写在style=””双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
<p style="font-size:20">设置字体大小。</p>
2. 嵌入式
把css样式代码写在<style type="text/css"></style>标签之间，并且放在<head></head>之间。
<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>HelloWorld</title><style type="text/css">h1{font-size: 32px;color: red;text-align: center;}</style></head>
3. 外部式
外部式css样式(也可称为外联式)，就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在<head>内使用<link>标签将css样式文件链接到HTML文件内。引入如下：
<link href="test.css" rel="stylesheet" type="text/css" />
注意：
1、css样式文件名称以有意义的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定写法不可修改。
3、<link>标签位置一般写在<head>标签之内。
4. 三种方式的比较
这三种样式的优先级：内联式 > 嵌入式 > 外部式，就是就近原则（离被设置元素越近优先级别越高）。
三、选择器
每一条css样式声明（定义）由两部分组成，形式如下：
选择器{样式;}
在{}之前的部分就是“选择器”，“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。
1. 标签选择器
标签选择器其实就是html代码中的标签，如<html>、<body>、<h1>、<p>、<img>等。
2. 类选择器
.类选器名称{css样式代码;}
1、为标签设置class=“类名称”
2、以英文圆点开头；
3、类选器名称可以任意起名。
3. ID选择器
#id选择器名称{css样式代码;}
1、为标签设置id=“ID名称”;
2、ID选择符的前面是井号（#）号。
4. 类选择器和ID选择器的区别
相同点：可以应用于任何元素
不同点：
- ID选择器只能在文档中使用一次，而类选择器可以使用多次。
- 可以使用类选择器词列表方法为一个元素同时设置多个样式，不能使用 ID 词列表。
比如：<span class="ca cb">该标签有两个class选择器
5. 子选择器
大于符号(>),用于选择指定标签元素的第一代子元素。仅是指它的直接后代，或者你可以理解为作用于子元素的第一代后代。通过“>”进行选择。
.parent>li{ border:1px solid red;}
表示parent这个类选择器下的li标签选择器添加了边框样式（粗细为1px， 颜色为红色的实线）。
6. 包含(后代)选择器
包含选择器，即加入空格,用于选择指定标签元素下的后辈元素。作用于所有子后代元素。后代选择器通过空格来进行选择。
.first span{ color:red;}
总结：>作用于元素的第一代后代，空格作用于元素的所有后代。
7. 通用选择器
通用选择器是功能最强大的选择器，它使用一个（*）号指定，它的作用是匹配html中所有标签元素
* { color:green;}
8. 伪类选择器
它允许给html不存在的标签（标签的某种状态）设置样式。比较常用的还是 a:hover 的组合。
9. 分组选择符
为html中多个标签元素设置同一个样式时，可以使用分组选择符（，）。
h1,p{ color:red;}
这样可以使得h1和p标签的内容都获取该颜色样式。
「爱情、让人受尽委屈。」
忘是亡心i
柔光的暖阳◎
Myth丶恋晨
￡神魔★判官ぃ
还没有评论，来说两句吧...