css学习笔记

Posted 2020-06-15

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css学习笔记相关的知识，希望对你有一定的参考价值。

1、css代码结构

　　选择器 {

　　　　　　属性:值;

　　} // 一组（属性:值）被称为声明，花括号又包含多组声明

　　　　// 当值出现为0时，后面不需要加px单位，因为0就是0

例如：

p{
   text-align: center;
   color: black;
   font-family: arial;
   margin: 0;
   padding: 0;
}

2、类名的第一个字符不能使用数字，因为在Mozilla或Firefox中不起作用，考虑到兼容性。

如果有多个分组，可以用逗号将需要分组的选择器分开，被分组的选择器可以共享相同的声明。

例如：

h1,h2,h3,h4,h5,h6{
    color: blue;
}

3、html元素可以基于它们的类被选择［也相当于一对一的关系］

例如：

td.fancy {
    color: #f60;
    background: #666;
}

在上面的例子中，类名为fancy的表格单元将带有#666的背景颜色和#f60的字体颜色。

<td class="fancy">我的样式会改变</td>
<p class="fancy">我虽然有fancy标注，但我的样式没改变</p>

这是由于我书写的这条规则的效果被限制于被标注为fancy的表格单元（即用td元素来选择fangcy类）。

4、属性选择器有4种常见类型：

（1）属性选择器，例子中将带有title 属性的所有元素设置样式

[title]{ color: blue; }

<h1 title="Hello">我的样式被改变了</h1>
<h2>我的样式没改变，因为我没加属性<h2>

(2)属性和值选择器，例子中将带有title="Hello"的所有元素设置样式

[title=Hello]{ color: blue; }

<h1 title="Hello">我的样式被改变了</h1>
<h2 title="World">我的样式没改变，即使我加了属性<h2>

(3)属性和值选择器－多个值，例子中适用于由空格分隔的属性值

[title~=hello]{ color: blue; }

<h1 title="Hello World">我的样式被改变了</h1>
<h2 title="World Hello">我的样式被改变了</h2>
<h3 title="World">我的样式没改变，因为我的属性名不对应<h3>

例子中适合由连字符分隔的属性值

[title|=en]{ color: blue; }

<h1 title="en">我的样式被改变了</h1>
<h2 title="en-us">我的样式被改变了</h2>
<h3 title="us">我的样式没改变，因为我的属性名不对应</h3>

　(4)设置表单的样式例子中适用于不带class或id的表单设置样式时特别有用

input[type="text"]{
   display: block;   
   width: 150px;
   margin-bottom: 10px;
   background-color: blue;
   font-family: Verdana, Arial;
}

input[type="button"]{
   display: block; 
   width: 120px;
   margin-left: 35px;
   font-family: Verdana, Arial;
}

<input type="text" name="Name" value="mini_wyy" size="20">
<input type="button" value="Button"

5、外部样式表

　页面使用<link>标签链接到样式表，<link>标签在（文档的）头部

<head>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>

以上是关于css学习笔记的主要内容，如果未能解决你的问题，请参考以下文章

[原创]java WEB学习笔记61：Struts2学习之路--通用标签 property，uri，param,set,push,if-else,itertor,sort,date,a标签等(代码片段

css学习笔记 4

css 学习笔记一

VSCode自定义代码片段——CSS选择器

VSCode自定义代码片段——CSS动画

css学习笔记