CSS基础

内容主要来源：https://www.runoob.com/css/css-syntax.html

CSS 指层叠样式表 (Cascading Style Sheets)

语法：

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明；

CSS注释以 "/*" 开始, 以 "*/" 结束；

id 选择器

如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

以下的样式规则应用于元素属性 id="para1":

#para1
{
    text-align:center;
    color:red;
}

ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用；

class 选择器

lass 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。

class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：

.center {text-align:center;}    /*所有拥有 center 类的 HTML 元素均为居中*/

你也可以指定特定的HTML元素使用class

/*所有的 p 元素使用 class="center" 让该元素的文本居中*/
p.center {text-align:center;}

CSS 创建

插入样式表的三种方式：

1、外部样式表

当样式需要应用于很多页面时，外部样式表将是理想的选择。

　　每个页面使用标签链接到样式表。标签在（文档的）头部：

<asp:Content ID="Content1" ContentPlaceHolderID="HeadStyle" runat="server">
    <link rel="stylesheet" href="/Content/bootstrap-fileinput/fileinput.min.css">     /*浏览器会再css文件中读到声明的样式，并根据它来格式文档*/
    <link href="/Content/jat-CommonStyle.css" rel="stylesheet" /> 
asp:Content>

Remark 不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。

2、内部样式表

当单个文档需要特殊的样式时，就应该使用内部样式表。可以使用

div内的p元素会变黄。

不在 div 中的p元素不会变

2、子元素选择器与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。

div>p    
{
  background-color:yellow;
}

3、相邻兄弟选择器，可选择紧接在另一元素后的元素，且二者有相同父元素

如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器

div+p
{      /*选取了所有位于  元素后的第一个  元素*/
  background-color:yellow;
}

3、后续兄弟选择器后续兄弟选择器选取所有指定元素之后的相邻兄弟元素。

div~p
{
  background-color:yellow;
}

CSS 伪类(Pseudo-classes)

CSS伪类是用来添加一些选择器的特殊效果。参考CSS伪类

　　伪类的语法：

　　selector:pseudo-class {property:value;

　CSS类也可以使用伪类，其格式如下：

　　selector.class:pseudo-class {property:value;}

例：伪类可以与 CSS 类配合使用如果链接已被访问，它会显示为红色。

a.red:visited {color:#FF0000;}   //定义的伪类
 
CSS 语法     使用伪类  class="red"

伪类存在的意义是为了通过选择器找到那些不存在与DOM树中的信息以及不能被常规CSS选择器获取到的信息。

　　伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

　　任何常规选择器可以在任何位置使用伪类。伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

对伪元素和伪类分不清的可参考：https://www.cnblogs.com/ihardcoder/p/5294927.html

first-child 伪元素:

选择父元素的第一个子元素。

所有CSS伪类元素:请参考

伪元素的由两个冒号::开头，然后是伪元素的名称。

　　使用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::。

　　一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

总结一下伪类与伪元素的特性及其区别：

伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
伪元素本质上是创建了一个有内容的虚拟容器；
CSS3中伪类和伪元素的语法不同；
可以同时使用多个伪类，而只能同时使用一个伪元素；

CSS 导航栏

　　参考： https://www.runoob.com/css/css-navbar.html

导航条基本上是一个链接列表，所以使用

元素非常有意义：

　　垂直导航栏 激活/当前导航条创建链接并添加边框    全屏高度的固定导航条

水平导航栏 有两种方法创建横向导航栏。使用内联(inline)或浮动(float)的列表项。

  激活/当前导航条添加 "active" 类来标准哪个选项被选中

链接右对齐将导航条最右边的选项设置右对齐 (float:right;)：

添加分割线

通过 border-right 样式来添加分割线:

　固定导航条设置页面的导航条固定在头部或者底部

CSS 下拉菜单

参考：https://www.runoob.com/css/css-dropdowns.html

创建下拉菜单，并允许用户选取列表中的某一项：

　CSS 提示工具(Tooltip)

使用 HTML 与 CSS 来创建提示工具。　


 
鼠标移动到这
  提示文本

使用容器元素 (like

) 并添加 "tooltip" 类。在鼠标移动到

上时显示提示信息。提示文本放在内联元素上(如 ) 并使用class="tooltiptext"。

margin-left 属性提示工具显示在头部或底部使用宽度的一半来居中对齐

　　添加箭头

可以用CSS 伪元素 ::after 及 content 属性为提示工具创建一个小箭头标志

.tooltip .tooltiptext::after {
　　right: 100%; /* 提示工具左侧 */
　　bottom: 100%; /* 提示工具头部 */
　　left: 100%; /* 提示工具右侧 */

}

　　淡入效果

　　使用 CSS3 transition 属性及 opacity 属性来实现提示工具的淡入效果

CSS 图像

　　透明/不透明

Opacity属性是W3C的CSS3建议的一部分。 Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。IE8和早期版本使用滤镜：alpha（opacity= x）。 x可以采取的值是从0 - 100。较低的值，使得元素更加透明。

　　1、图像拼合技术

　　图像拼合就是单个图像的集合。使用图像拼合会降低服务器的请求数量，并节省带宽。




 
菜鸟教程(runoob.com)  






    //因为不能为空,src属性只定义了一个小的透明图像。显示的图像将是我们在CSS中指定的背景图像

　　2、创建一个导航列表

　　实现图像拼合后，可能需要让图片有导航按钮的功能。

　　3、悬停效果

　　鼠标放上去后回显示效果，只添加三行代码：

#home a:hover{background: url('img_navsprites_hover.gif') 0 -45px;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
#next a:hover{background: url('img_navsprites_hover.gif') -91px -45px;}

　　CSS 媒体类型

　　　　@media 规则允许在相同样式表为不同媒体设置不同的样式。

媒体类型	描述
all	用于所有的媒体设备。
aural	用于语音和音频合成器。
braille	用于盲人用点字法触觉回馈设备。
embossed	用于分页的盲人用点字法打印机。
handheld	用于小的手持的设备。
print	用于打印机。
projection	用于方案展示，比如幻灯片。
screen	用于电脑显示器。
tty	用于使用固定密度字母栅格的媒体，比如电传打字机和终端。
tv	用于电视机类型的设备。

例如：

@media screen
{
    p.test {font-family:verdana,sans-serif;font-size:14px;}
}
@media print
{
    p.test {font-family:times,serif;font-size:10px;}
}
@media screen,print
{
    p.test {font-weight:bold;}
}

　　CSS 属性选择器

　　具有特定属性的HTML元素样式不仅仅是class和id。

[title]     //把包含标题（title）的所有元素变为蓝色
{
    color:blue;
}

[title=runoob]    //改变了标题title='runoob'元素的边框样式
[title~=hello]     //包含指定值的title属性的元素样式的例子，使用（~）分隔属性和值:
[lang|=en]    //包含指定值的lang属性的元素样式的例子
属性选择器样式无需使用class或id的形式:
input[type="text"]     //为text控件改变效果
input[type="button"]   //为button 改变效果

　　CSS 表单

　　如果你只想设置指定类型的输入框可以使用以下属性选择器：

input[type=text] - 选取文本输入框
input[type=password] - 选择密码的输入框
input[type=number] - 选择数字的输入框

　　使用 width 属性来设置输入框的宽度：

　　使用 padding 属性可以在输入框中添加内边距。　设置 box-sizing 属性为 border-box。这样可以确保浏览器呈现出带有指定宽度和高度的输入框是把边框和内边距一起计算进去的。

　　使用 border 属性可以修改 input 边框的大小或颜色，使用 border-radius 属性可以给 input 添加圆角：只想添加底部边框可以使用 border-bottom 属性:

　　使用 background-color 属性来设置输入框的背景颜色，color 属性用于修改文本颜色：

　　默认情况下，一些浏览器在输入框获取焦点时（点击输入框）会有一个蓝色轮廓。我们可以设置 input 样式为 outline: none; 来忽略该效果。使用 :focus 选择器可以设置输入框在获取焦点时的样式：

input[type=text]:focus {     //当鼠标选中type为text的输入框时，背景色变位lightblue
  background-color: lightblue;
}

　　想在输入框中添加图标，可以使用 background-image 属性和用于定位的background-position 属性。注意设置图标的左边距，让图标有一定的空间：

　　使用 resize 属性来禁用文本框可以重置大小的功能（一般拖动右下角可以重置大小）。

　　CSS 计数器

　　使用计数器自动编号。计数器根据规则来递增变量。CSS 计数器使用到以下几个属性：

counter-reset - 创建或者重置计数器
counter-increment - 递增变量
content - 插入生成的内容
counter() 或 counters() 函数 - 将计数器的值添加到元素

本文仅作为笔者学习笔记，如有侵权请留言。

CSS基础

语法：

id 选择器

class 选择器

CSS 创建

插入样式表的三种方式：

1、外部样式表

2、内部样式表

CSS 伪类(Pseudo-classes)

first-child 伪元素:

CSS 导航栏

CSS 下拉菜单

CSS 提示工具(Tooltip)

添加箭头

淡入效果

CSS 图像

透明/不透明

1、图像拼合技术

2、创建一个导航列表

3、悬停效果

CSS 媒体类型

CSS 属性选择器

CSS 表单

CSS 计数器

相关

「B/S端开发」DevExtreme初级入门教程 - 主题配置 & 验证

「B/S端开发」DevExtreme初级入门教程 - 支持TypeScript

HTML—B/S结构介绍与HTML概述

b/s模式下浏览器到服务器请求过程

B/S端界面控件DevExtreme ASP.NET MVC入门指南 - 调用方法

标签

CSS基础

语法：

id 选择器

class 选择器

CSS 创建

插入样式表的三种方式：

1、外部样式表

2、内部样式表

CSS 伪类(Pseudo-classes)

first-child 伪元素:

CSS 导航栏

CSS 下拉菜单

CSS 提示工具(Tooltip)

添加箭头

淡入效果

CSS 图像

透明/不透明

1、图像拼合技术

2、创建一个导航列表

3、悬停效果

CSS 媒体类型

CSS 属性 选择器

CSS 表单

CSS 计数器

相关

「B/S端开发」DevExtreme初级入门教程 - 主题配置 & 验证

「B/S端开发」DevExtreme初级入门教程 - 支持TypeScript

HTML—B/S结构介绍与HTML概述

b/s模式下 浏览器到服务器请求过程

B/S端界面控件DevExtreme ASP.NET MVC入门指南 - 调用方法

标签

　CSS 提示工具(Tooltip)

　　添加箭头

　　淡入效果

　　透明/不透明

　　1、图像拼合技术

　　2、创建一个导航列表

　　3、悬停效果

　　CSS 媒体类型

　　CSS 属性选择器

　　CSS 表单

　　CSS 计数器

b/s模式下浏览器到服务器请求过程