知识点一:

CSS概念:CSS 指层叠样式表 (Cascading Style Sheets)(级联样式表) 
Css是用来美化html标签的,相当于页面化妆。

知识点二:

选择器格式与部分属性: 
写法:

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

选择器是一个选择(一/多个)标签的过程。 
对应的属性与值表: 
Width:20px; 宽 
Height:20px; 高 
背景颜色 
font-size:24px; 文字大小 
text-align:left | center| right 内容的水平对齐方式 
text-indent:2em; 首行缩进 
Color:red; 文字颜色

知识点三:

基础选择器:

一:标签选择器:

特点:标签选择器定义之后,会将页面所有的元素都执行这个标签样式。

    标签{属性:值}
div{
font-size: 50px;
color:green;
background-color:yellow;
width:300px;
height:200px;
} p{
color:pink;
font-size:60px;
}

颜色的显示方式:

  • 直接写颜色名称。
  • 十六进制显示颜色。
#000000;前2位代表红色,中间代表绿色,后两位代表蓝色。值越接近0颜色越深
  • RGB
color:rgb(120,120,120);值在0-255之间。
  • RGBA 最后一位值在0-1
color:  rgba(102,217,239,0.5);

二:类选择器:

特点:谁调用,谁生效。一个标签可以调用多个类选择器,多个标签可以调用同一个类选择器。 
在标签中使用class属性调用,不同的类之间用空格分开。

.自定义类名{属性:值;属性:值;}
.box{
font-size: 50px;
color:green;
background-color:yellow;
width:300px;
height:200px;
} .miss{
color:pink;
font-size:60px;
}

类选择器命名规则: 
不能用纯数字或数字开头来定义类名 
不能使用特殊符号或者特殊符号开头(_)来定义类名。 
不建议使用汉字来定义类名。 
不推荐使用属性或者属性的值来定义类名。 
常见的命名模板:

三:ID选择器:

特点:一个ID选择器在一个页面只能调用一次。如果使用两次或多次以上,是不符合w3c规范的,JS调用会出现问题。 
一个标签只能调用一个ID选择器。 
一个标签可以同时调用类选择器与ID选择器。

#自定义名称{属性:值;}

四:通配符选择器:

特点:给所有的标签都使用相同的样式。 
不推荐使用。

*{属性:值;}

知识点四:

复合选择器: 概念:两个或两个以上的基础选择器通过不同的方式连接在一起。

一:交集选择器:

特点:既要满足使用的某个标签选择器,又要满足使用了类选择器。

标签+类(ID)选择器{属性:值;}
div.box{
color:red;
}
div#miss{
width:400px;
height:300px;
background-color:yellow;
}

二:后代选择器:
选择器特点:后代选择器首先要满足包含(嵌套关系) 
父集元素在前,子集元素在后。 
特点:无限制隔代。 
只要能代表标签,标签、类选择器、ID选择器自由组合。

div #miss{
width:400px;
height:300px;
background-color:yellow;
} <div>
<div id="miss"></div>
</div>

三:子代选择器:

选中直接下一代元素

选择器>选择器{属性:值;}
div>span{
width:300px;
height:200px;
}
p>span{
width:300px;
height:200px;
}
<div>
<p>
<span>赵灵儿</span>
</p>
<span>林月如</span>
</div>

四:并集选择器: 
选择器+,+选择器+,选择器{属性:值;} 
特点:某些元素或部分元素的属性完全相同,则他们可以写在一块。

.box,#miss,span,h1{
width:300px;
color:#000;
}

知识点五:

文本元素: 
一:属性:

font-size:16px;             文字大小
font-weight:700; 值从100-900,文字粗细,不推荐使用font-weight:bold;
font-family:微软雅黑; 文字字体
font-style:normal|italic normal默认值,italic斜体。
line-heitht:10px; 行高。

文本属性连写: 
font: font-style font-weight font-size/line-height font-family; 
注意:font:后边写属性的值。一定按照书写顺序。 
文本属性连写文字大小和字体为必写项。

例: Font:italic 700 16px/40px  微软雅黑;

文字的字体表达形式: 
一:直接写中文名称:

    div{
font-family:微软雅黑;
font-size:60px;
}

二:写字体的英文名称:

div{
font-family:microsoft yahei;
font-size:15px;
}

Unicode编码:

如何快速获得字体的Unicode编码: 
在页面的console中 
escape(“字体名”) 
即可获取。

CSS-笔记1-选择器与文本元素的更多相关文章

  1. 【css笔记(2)】如何给元素应用规则?

    css选择器 在介绍之前我么你先来看看css大致分为几种选择器: 1.类型选择器(元素选择器) 2.后代选择器(元素的所有后代) 3.伪类(:active, :hover, :focus, :link ...

  2. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  3. bootstrap快速入门笔记(五)-文本元素类,各种标签,排版

    1,h1到h6这里也有定义了 2,全局元素被直接赋予font-size 设置为 14px,line-height 设置为 1.428,<p> (段落)元素还被设置了等于 1/2 行高(即 ...

  4. CSS笔记(四)文本

    CSS 文本属性可定义文本的外观.通过文本属性,可以改变文本的颜色.字符间距,对齐文本,装饰文本和对文本进行缩进,等等. 参考:http://www.w3school.com.cn/css/css_t ...

  5. CSS伪类选择器和伪元素选择器

    CSS的伪类选择器常用的是link/visited/hover/active,分别对应未访问.已访问过.鼠标悬停.鼠标按下时的样式,常用于链接,使用时要按此顺序依次写CSS,不能乱 a:link{ba ...

  6. CSS笔记——属性选择器

    1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...

  7. 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解

    派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...

  8. CSS学习笔记之选择器

    目录 1.元素选择器 2.继承 3.选择器分组 4.声明分组 5.后代选择器 6.子元素选择器 7.相邻兄弟选择器 8.类选择器 9.ID 选择器 10.属性选择器 11.伪类 12.伪元素 1.元素 ...

  9. css选择器(常规选择器,伪类选择器,伪元素选择器,根元素选择器)

    前言 CSS的一个核心特性是能向文档中的一组元素类型应用某些规则,本文将详细介绍CSS选择器 选择器 [通配选择器] 星号*代表通配选择器,可以与任何元素匹配 *{color: red;} [元素选择 ...

  10. CSS 常见的8种选择器 和 文本溢出问题

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>c ...

随机推荐

  1. WPF popup置顶

    在程序写一个popup发现他会在置顶,在网上找了两大神代码http://www.cnblogs.com/Leaco/p/3164394.html http://blog.csdn.net/baijin ...

  2. Eratosthenes,筛法求素数

    //筛法求区间[0,n]的所有素数,v为素数表 //v[i]==0,i为素数 void f(int n) { int m=sqrt(n+0.5); memset(v,,sizeof(v)); ;i&l ...

  3. Python线程的常见的lock

    IO阻塞分析: 下面该需求很简单将一个数值100做自减处到0.主函数中有0.1秒的IO阻塞 import threading import time def sub(): global num # 掌 ...

  4. 03Vue事件

    Vue提供了事件的绑定,方法写在methods对象中. 绑定dom中有两种方法: 方法一:v-on:click/dblclcick/mouseOver/mouseOut="方法名" ...

  5. Mybatis基本用法--下

    Mybatis基本用法--下 第七部分 mybatis-spring-boot-starter 官网:http://www.mybatis.org/spring-boot-starter/mybati ...

  6. sql语句中生成0-10随机数

    DECLARE @i int=0;DECLARE @j decimal(9,2);DECLARE @qnum INT=1000; SET NOCOUNT ONCREATE TABLE #temp_Ta ...

  7. Arduino.最小系统面包板搭建

    最早试过用万用板做过最小系统,主要用来烧录芯片 后来为了方便,用面包板也搭了一个最小系统, 但不采用杜邦线,因为飞来飞去的线太乱了 因此就有了这个简洁的版本,先上个成品图 用个烧录器就可以很方便的烧写 ...

  8. LeetCode 628. Maximum Product of Three Numbers (最大三数乘积)

    Given an integer array, find three numbers whose product is maximum and output the maximum product. ...

  9. LeetCode 119. Pascal's Triangle II (杨辉三角之二)

    Given an index k, return the kth row of the Pascal's triangle. For example, given k = 3,Return [1,3, ...

  10. poj 1254 Hansel and Grethel

    Hansel and Grethel Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 2199   Accepted: 100 ...