CSS学习小记1（Dreamweaver CC 创建选择器）

创建CSS 选择器

第一种方式：
首先以“标准”窗口为准。

1.光标在HTML中选取需要定义的目标标签，该内容上方出现标签名称和+。

2.点击+,出现输入框，输入选择器名称，英文字母开头即可，直接输入一个新的名称，如：abc，就会在右侧的CSS designer 中选择器栏自动生存一个.abc选择器，而代码行自动出现CSS样式class代码。
ps：
想选择已有的就输入前缀后，在下拉列表选择；想新建就输入一个新的名称，enter后选择源和媒体，再enter即可新建选择器。
注意
1.不建议直接输入一个完整的已有选择器名称。
2.英文字母开头！或#。
如果是直接创建id，就用#开头，注意id只能被一个元素调用，class可以被多个元素调用原则。

3.改变选择器属性，即可改变相关内容的样式。

第二种方式：
1、在右侧“CSS设计器”面板，在“源”窗格中，（+）创建一个“源”或选择其中已有的外部“源”文件（在页面中直接定义的源，就不可在其他页面被调用）。
2、在@媒体窗格中，选择某个媒体查询（媒体查询是一种 CSS3 模块，可帮助您通过为不同设备或媒体类型定义不同的样式规则来设计响应式网站，如无需求可不选）。
3、在“选择器”窗格中，单击（+）。根据在文档中选择的元素，“CSS Designer”会智能提供选择器的粗略/具体显示名称（基于正在选中的HTML标签，使用上下按键选择，不需要提供的名称可自行命名）。
4、在HTML内，为某个标签设计id，可以为选择器命名#+id内容，直接为该标签作样式控制。如：HTML内设定<p id="paragraph">前端学习</p> 在选择器窗格里面，选择器命名为#paragraph，即可为这段落标签设置样式。（再次注意选择器不可以数字开头）
5、新建了选择器，属性窗格弹出”添加属性“栏，可以直接输入需要添加的样式代码，选择值。也可以勾选“显示集”查看所有属性来寻找需要的样式。
6、“全部”指的是此页面的全部CSS选择器，“当前”指的是当前选中的标签中包含的CSS选择器。

CSS学习小记1（Dreamweaver CC 创建选择器）相关推荐

CSS学习（05结构伪类选择器浮动及清除）
文章目录一结构伪类选择器 1.1 作用与优势: 1.2 选择器 1.3 n的注意点二伪元素 2.1 区别: 2.2 种类: 2.3 注意点: 三标准流四浮动 4.1 浮动的产生 4.2 ...
【温故知新】CSS学习笔记（后代和子代选择器）
后代和子代选择器 CSS的选择器除了之前介绍的基本选择器之外,还有符合选择器,可以处理一些基本选择器无法处理的难题. 1.后代选择器比如下面的例子,我们需要将所有的"Hello" ...
【温故知新】CSS学习笔记（并集和交集选择器）
并集和交集选择器这一节我们介绍另外两个"复合选择器",并集选择器和交集选择器. 复习一下上一讲的"子代选择器",看下面的例子,要求将"上级菜单&qu ...
CSS学习05之结构伪类选择器
回顾基本选择器又分为三种方式: 后代选择器子选择器相邻选择器通用选择器结构伪类选择器结构伪类选择器有很多种伪类,这里我们列举常用的几种方式: first-child 伪类 hover悬停伪 ...
【温故知新】CSS学习笔记（链接伪类选择器）
链接伪类选择器伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果. 之前我们学过类选择器,以点"."开头,为了区分开来,伪类选择器则是以冒号":" ...
dreamweaver html css,Dreamweaver CC
Dreamweaver CC教程:CSS代码提示 CSS代码提示代码提示可用于以下不同类型的 CSS: @规则属性伪选择器和伪元素速记除了代码提示,提示也适用于 CSS 属性. CSS 代码 ...
dreamweavercs5创建php,Dreamweaver cs5创建CSS规则的方法
Adobe Dreamweaver CS5 (32/64位) 软件大小:407.69 MB授权方式:共享软件立即下载 Dreamweaver cs5怎么创建CSS规则?Dreamweaver集网页制 ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记｜MDN-CSS选择器
记录在MDN学习CSS中的一些个人笔记. 选择器种类通配选择器或叫全局选择器.选中所有元素. * {} 标签.类.ID选择器标签选择器.选择所有的 h1 元素 h1 { } 类选择器.选择类名有 ...

CSS学习小记1（Dreamweaver CC 创建选择器）

CSS学习小记1（Dreamweaver CC 创建选择器）相关推荐

最新文章

热门文章