Шпора по html и css

CSS и HTML у нас будут в одном месте, потому что их нельзя разьединить. Не может быть CSS без HTML

Теги

!DOCTYPE html »

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

<!DOCTYPE html> – означает для всех документов

почитать можно тут.

Формы

Показать »

Форма просто с полем <input>

form1

<h1>Добавить Работу</h1>
<form action="addrabot.php" method="post">
<input type="text" name="name" value="" size="30"> Название работы<br>

<input type="submit" name="sub" value="Добавить">
</form>

Форма регистрации с  <input> и со скрытым полем <input>

form2

<h1>Редактировать критерий</h1>
<form action="editcriterion.php?id=<?php echo $row['id'];?>" method="post">
<input type="text" name="name" value="<?php echo $row['name'];?>"> Имя критерия<br>
<input type="hidden" name="id" value="<?php echo $row['id'];?>">

<input type="submit" name="sub" value="Обновить критерий">
</form>

Форма с несколькими <input>

form

<h1>Добавить эксперта</h1>
<form action="addexpert.php" method="post">
<input type="text" name="fam" value="<?php echo $_REQUEST['fam'];?>"> Фамилия<br>
<input type="text" name="name" value="<?php echo $_REQUEST['name'];?>"> Имя<br>
<input type="text" name="sename" value="<?php echo $_REQUEST['sename'];?>"> Отчество<br>
<input type="text" name="tell" value="<?php echo $_REQUEST['tell'];?>"> Телефон<br>
<input type="text" name="email" value="<?php echo $_REQUEST['email'];?>"> Email<br>
<input type="test" name="pass" value="<?php echo $_REQUEST['pass'];?>"> пароль<br>
<input type="submit" name="sub" value="Добавить">
</form>

 

Создание сложных таблиц

Показать »

Пример сложной таблицы и ее код

Критерий Место значимости
Эксперт 1 Эксперт 2 Эксперт 3 Эксперт 4
1 Степень соответствия стратегии 1 11 6 10 28
2 Четкое разделение результатов работы 5 1 1 4 11
3 Актуальность работы 2 2 2 1 7
36

 

<table border='1'>
<tr>
<td rowspan='2'>№</td><td rowspan='2'>Критерий</td><td colspan='5'>Место значимости</td>
</tr>
<tr>
<td>Эксперт 1</td><td>Эксперт 2</td><td>Эксперт 3</td><td>Эксперт 4</td><td></td>
</tr>
<tr>
<td>1</td><td>Степень соответствия стратегии</td><td>1</td><td>11</td><td>6</td><td>10</td><td>28</td>
</tr>
<tr>
<td>2</td><td>Четкое разделение результатов работы</td><td>5</td><td>1</td><td>1</td><td>4</td><td>11</td>
</tr>
<tr>
<td>3</td><td>Актуальность работы</td><td>2</td><td>2</td><td>2</td><td>1</td><td>7</td>
</tr>
<tr>
<td colspan='6'></td><td>36</td>
</tr>
</table>

 Кодировка через html

Показать »

<html>
<head>
<title>...</title>
<META content="text/html; charset=utf-8" http-equiv="Content-Type">
</head>
<body>
...
</body>
</html>

Подключение стилей и javaScript скриптом и пропись их »

<head>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style1.css">
	
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/testвв.js">
	</script>

	<style type="text/css">
		/*.header{
			color:red;
		}*/
	</style>

	<script type="text/javascript">
		alert('hello world!');
	</script>
	
	<title>title</title>
</head>

 

Подключение файлов css

<link href="css/style.css" rel="stylesheet">

пропись напрямую стиля для параграфа

<p style=’color:red; size:20px’>hellow world</p> выведет

hellow world

float – обтекание элемента »

показывает по какой стороне будет выравниваться элемент, значение left показывает что элемент выравнивается по левому краю, а все остальные обтикают его справа. Если установить right то элементы будут обтикать по левому краю, а выравнивание будет по правому.

/*контент сайта*/
#content{
	background: #d2d0d2;
	/*задает обтикание элемента слева*/
    float: left;
    width: 700px;
    height: 400px;
}

/*сайдбар сайта*/
#sidebar{
	background: #99CC99;
	/*задает обтекание элемента справа*/
    float:right;
    width: 200px;
    height: 400px;
}

и два блока

<div id="content"><h2>content</h2></div>
<div id="sidebar"><h2>sidebar</h2></div>

они как бы прицепятся по краям. В общем между ними может быть любой текст это к примеру. Блоки как бы идут по порядку и если между ними добавить еще один блок, то мы туда можем что то помещать и он окажется как бы посередине.

Блочная верстка в два блока »

файл index html

<html>
<head>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style.css">
	
	<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/testвв.js">
	</script>	

	<title>title</title>
</head>

<body>
<div id="container">
	<!-- header -->
	<div id="header">
		<h2>head</h2>
	</div>
	<div id="navigation"><h2>Навигация</h2></div>

	<div id="content"><h2>content</h2></div>
	<div id="sidebar"><h2>sidebar</h2></div>
	<div id="footer"><h2>footer</h2></div>
</div>

</body>
</html>

Файл style.css

/*тело сайта*/
body {
	background: #f3f2f3;
	color: #000000;
	font-family: Trebuchet MS, Arial, Times New Roman;
	font-size: 12px;
}

/*контейнер*/
#container{
	/*фон блока*/
	background:#99CC99;
	/*внешний отступ от границы*/
   	margin: 30px auto;
    width: 900px;
    height: 600px;
    border: solid 3px;
}

/*header сайта*/
#headera{
	background: #66CCCC;
	height: 100px;
	width: 900px;
}

/*навигация сайта*/
#navigation{
	background: #FF9999;
    width: 900px;
    height: 20px;
}

/*контент сайта*/
#content{
	background: #d2d0d2;
	/*задает обтикание элемента слева*/
    float: left;
    width: 700px;
    height: 400px;
}

/*сайдбар сайта*/
#sidebar{
	background: #99CC99;
	/*задает обтекание элемента справа*/
    float:right;
    width: 200px;
    height: 400px;
}

/*футер сайта*/
#footer{
	background: #ccc;
    height: 80px;
    width: 900px;
    /*запрещает обтекание элемента с двух сторон другими элементамиа*/
    clear: both;
}

h2 {
	margin: 0px;
	padding: 0px;
}

и от что у нас вышло

blochnaya verstka

Блочная верстка в три блока »

файл index.php

<html>
<head>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style.css">
	<script type="text/javascript" src='<?php bloginfo('template_url'); ?>/js/test22.js'></script>
<title>Undefined title</title>
</head>
<body>

<div id="container">
	<div id="header"><h2>header</h2></div>
	<div id="navigation"><h2>navigation</h2></div>
	<div id="left-menu"><h2>right-menu</h2></div>
	<div id="content"><h2>content</h2></div>
	<div id="right-menu"><h2>left-menu</h2></div>
	<div id="footer"><h2>footer</h2></div>
</div>

</body>
</html>

файл style.css

body{
	font-size: 14px;
	background: pink;
	border: solid 3px black;
	margin: 0px;
	padding: 0px;
}
h2{
	margin: 0px;
	padding: 0px;
}

#container{
	max-width: 900px;
	height: 1200px;
	background: grey;
	/*выравнивание по центру*/
	margin: 30 auto;
	border: solid 2px;
}

#header{
	max-width:900px;
	height: 200px;
	background:red;
	color:white;
}
#navigation{
	max-width:900px;
	height: 50px;
	background:white;
	color:red;
}
#left-menu{
	/*width: 200px;*/
	width: 25%;
	min-width: 150px;
	height: 500px;
	float: left;
	background: blue;
}
#content{
	/*max-width: 500px;*/
	width:50%;
	min-width: 300px;
	height: 500px;
	margin 0 200px 0 0;
	background: #ccc;
	float: left;
}
#right-menu{
	/*width: 200px;*/
	min-width: 150px;
	width: 25%;
	height: 500px;
	float: left;
	background: blue;
}
#footer{
	max-width: 900px;
	height: 300px;
	clear: both;
	background: green;
}

и то что мы получаем

blockverstka

выравнивание по центру блок »

auto дает выровнять по центру блок

Установка width для блочного элемента пресечет его бесконечное растягивание к левому и правому краям. Вы можете установить левый и правый отступы, задав значение auto, которое приведет к центрированию элемента по горизонтали. Элемент будет занимать ширину, которую вы укажете, а оставшееся незаполненное пространство будет разделено поровну между двумя отступами.    

/*выравнивание по центру*/
margin: 30 auto;

Еще один пример адаптивной верстки на 3 блока »

index.php

<!Document html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/style.css">
	<title>Unknown title</title>
</head>
<body>
	<div id="container">
		<div id="header"><h2>header</h2></div>
		<div id="navigation"><h2>navigation</h2></div>
		<div id="left-menu"><h2>left-menu</h2></div>
		<div id="content"><h2>content</h2></div>
		<div id="right-menu"><h2>right-menu</h2></div>
		<div id="footer"><h2>footer</h2></div>
	</div>
</body>
</html>

style.css

body{
	background:  pink;
	border: solid 2px black;
	margin: 0px;
}

#container,#header,#navigation,#left-menu,#content,#right-menu,#footer{
	margin: 0px;
}

#container{
	background: #1322;
	max-width: 900px;
	margin: 0 auto;
}

#header{
	background: red;
	height: 200px;
}

#navigation{
	background: #aaa;
	height: 100px;
	border: solid 1px black;
}

#left-menu{
	min-width: 200px;
	background: blue;
	width: 25%;
	height: 300px;
	float: left;
}

#content{
	/*указываем минимальную ширину*/
	min-width: 300px;
	background: #eee;
	width: 50%;
	height: 500px;
	float: left;
}

#right-menu{
	/*указываем минимальную ширину*/
	min-width: 200px;
	background: blue;
	width: 25%;
	height: 250px;
	float: left;
}

#footer{
	background: green;
	clear: both;
	height: 250px;
}

пример того что получилось

blockverstka2

 

 

 

 

 

 

 

 

 

 

 

Комментарии:


Оставить комментарий

Your email address will not be published. Required fields are marked *